jQuery常見動畫效果實現(xiàn)介紹

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

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

1.常見的動畫效果

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

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

2.顯示隱藏效果

顯示語法規(guī)范

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

顯示參數

1.參數都可以省略,無動畫直接顯示。

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

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

4.fn:回調函數,在動畫完成時執(zhí)行的函數,每個元素執(zhí)行一次。

隱藏語法規(guī)范

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

隱藏參數

1.參數都可以省略,無動畫直接顯示。

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

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

4.fn:回調函數,在動畫完成時執(zhí)行的函數,每個元素執(zhí)行一次。

3.滑動效果

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

給我們之前寫過的下拉菜單加上滑動效果：

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

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

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

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

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

但是當我們鼠標快速經過離開時，每次都會觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行

停止排隊：

stop()

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

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

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

4.自定義動畫animate

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

參數

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

小案例

實現(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>

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

您可能感興趣的文章: