欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery常見動(dòng)畫效果實(shí)現(xiàn)介紹

 更新時(shí)間：2022年10月24日 09:26:39   作者：YinJie…  
這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.常見的動(dòng)畫效果

jQuery給我們封裝了很多動(dòng)畫效果,最為常見的如下:

顯示隱藏show()    hide()     toggle()
滑動(dòng)slideDown()   slideUp()   slideToggle()
淡入淡出fadeIn()  fadeOut()  fadeToggle()  fadeTo()
自定義動(dòng)畫animate()

2.顯示隱藏效果

顯示語法規(guī)范

show([speed,[easing],[fn]])

顯示參數(shù)

1.參數(shù)都可以省略,無動(dòng)畫直接顯示。

2.speed :三種預(yù)定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如: 1000)。

3.easing : (Optional)用來指定切換效果,默認(rèn)是"swing” ,可用參數(shù)"linear" 。

4.fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。

隱藏語法規(guī)范

hide([speed,[easing],[fn]])

隱藏參數(shù)

1.參數(shù)都可以省略,無動(dòng)畫直接顯示。

2.speed :三種預(yù)定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如: 1000)。

3.easing : (Optional)用來指定切換效果,默認(rèn)是"swing” ,可用參數(shù)"linear" 。

4.fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。

3.滑動(dòng)效果

滑動(dòng)效果的語法規(guī)范和參數(shù)與顯示隱藏效果相同，這里我們用一個(gè)案例加以說明：

給我們之前寫過的下拉菜單加上滑動(dòng)效果：

// 鼠標(biāo)經(jīng)過
$(".nav>li").mouseover(function() {
//$(this) jQuery 當(dāng)前元素  this不要加引號(hào)
// show() 顯示元素  hide() 隱藏元素
    $(this).children("ul").slideDown(200);
});
// 鼠標(biāo)離開
$(".nav>li").mouseout(function() {
    $(this).children("ul").slideUp(200);
});

但是jQuery覺得這樣寫太復(fù)雜了，于是有了事件切換：

  // 1. 事件切換 hover 就是鼠標(biāo)經(jīng)過和離開的復(fù)合寫法
$(".nav>li").hover(function() {
      $(this).children("ul").slideDown(200);
}, function() {
      $(this).children("ul").slideUp(200);
});

hover里面第一個(gè)函數(shù)是鼠標(biāo)經(jīng)過時(shí)觸發(fā)的，第二個(gè)是鼠標(biāo)離開時(shí)觸發(fā)的，他和前面的代碼有相同的效果，但是jQuery覺得這樣還是太復(fù)雜，這下只需要一個(gè)函數(shù)就可以實(shí)現(xiàn)效果：

 // 2. 事件切換 hover  如果只寫一個(gè)函數(shù)，那么鼠標(biāo)經(jīng)過和鼠標(biāo)離開都會(huì)觸發(fā)這個(gè)函數(shù)
$(".nav>li").hover(function() {
      $(this).children("ul").slideToggle();
});

但是當(dāng)我們鼠標(biāo)快速經(jīng)過離開時(shí)，每次都會(huì)觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行

停止排隊(duì)：

stop()

  • stop()方法用于停止動(dòng)畫或效果
  • 注意：stop()寫到動(dòng)畫或者效果的前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫

修改一下我們上例的代碼：

$(".nav>li").hover(function() {
      $(this).children("ul").stop().slideToggle();
});

4.自定義動(dòng)畫animate

fadeIn(params,[speed],[easing],[fn]])

參數(shù)

  • params:想要更改的樣式屬性,以對(duì)象形式傳遞，必須寫。屬性名可以不用帶引號(hào)，如果是復(fù)合屬性則需要采取駝峰命名法borderLeft.其余參數(shù)都可以省略。
  • speed :三種預(yù)定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如: 1000)。
  • easing : (Optional)用來指定切換效果,默認(rèn)是"swing” , 可用參數(shù)"linear" 。
  • fn:回調(diào)函數(shù),在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。

小案例

實(shí)現(xiàn)效果：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function() {
            $('div').click(function() {
                $(this).animate({
                    left:400,
                    width:500
                },500);
            })
        });
    </script>
</body>
</html>

到此這篇關(guān)于jQuery常見動(dòng)畫效果實(shí)現(xiàn)介紹的文章就介紹到這了,更多相關(guān)jQuery動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論