快捷導(dǎo)航

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

更新時(shí)間：2022年10月24日 09:26:39 作者：YinJie…

這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

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

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

2.顯示隱藏效果

顯示語(yǔ)法規(guī)范

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

顯示參數(shù)

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

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

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

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

隱藏語(yǔ)法規(guī)范

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

隱藏參數(shù)

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

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

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

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

3.滑動(dòng)效果

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

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

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

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

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

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

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

但是當(dāng)我們鼠標(biāo)快速經(jīng)過(guò)離開(kāi)時(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í)長(zhǎng)的毫秒數(shù)值(如: 1000)。
easing : (Optional)用來(lái)指定切換效果,默認(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常見(jiàn)動(dòng)畫效果實(shí)現(xiàn)介紹的文章就介紹到這了,更多相關(guān)jQuery動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: