jQuery自定義動畫animate()

jQuery中的show()方法和hide()方法會同時修改元素的多個樣式，即寬度、高度和不透明度；fadeOut()方法和fadeIn()方法只會修改元素的不透明度；slideDown()方法和slideUp()方法只會修改原色的高度。這些有時候根部滿足不了需求，所以就要采取一些高級的自定義動畫，在jQuery中可以使用animate()方法來自定義動畫；

（注：本文默認已使用jquery-1.7.1.js庫！！）

 

animate()

語法 ：

animate(params,speed,callback);

參數：  ①params：一個包含樣式屬性及值的映射，比如{property1 : "value1",property2 : "value2",........}；

              ②speed：速度參數，可選參數；

              ③callback：在動畫完成時執行的函數，可選；

 

如下例讓div動起來：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").click( function () {
        //三種動畫同時進行
        //$(this).animate({ left: "+=500px",height:"+=500px",width:"+=500px"}, 2000);
        //三種動畫順序執行
        $( this).animate({ left : "+=500px"}, 50);
        $( this).animate({ height : "+=500px"}, 50);
        $( this).animate({ width : "+=500px" }, 50);
        });
    });
< /script >

 

鏈式方式（動畫隊列）：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
        $( this).animate({ left : "400px", height : "400px", opacity : "1" }, 2000)
            .animate({ top : "200px", width : "400px" }, 2000)
            .fadeOut( "slow");
        });
    });
< /script >

 

動畫回調函數（callback）：

需要注意的是，css()方法不會加入到動畫隊列中個，而是立即執行。此時可以使用animate方法的最后一個參數callback；使用回調函數(callback)可以對非動畫方法實現隊列，只要將css()方法寫在某個動畫中的回調函數里即可！例如：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
            $( this).animate({ left : "400px", height : "400px", opacity : "1" }, 2000, function () { $( this).css( "border", "5px solid blue"); })
            .animate({ top : "200px", width : "400px" }, 2000, function () { $( this).css( "background-color", "Green"); })
        });
    });
< /script >

注意：callback回調函數適用於jQuery所有的動畫效果方法！！

 

停止元素的動畫：

    方法：stop([clearQueue],[gotoEnd]);

      參數：clearQueue：boolean值，表示是否要清空未執行完的動畫隊列；

             gotoEnd：代表是否直接將正在執行的動畫跳轉到末狀態；

      這兩個參數都是可選參數！！

 

判斷元素是否處於動畫狀態：

    語法：             

if ( !$( "#panel").is( ":animated")) {
     //如果當前元素(id=panel)沒有進行動畫，則添加新的動畫！
}

      

延遲動畫：

    在動畫執行的過程中，如果相對動畫進行延遲操作，可使用delay()方法；用法如下：

<script type = "text/javascript" >
    $( function () {
        $( "#panel").css( "opacity", "0.5");
        $( "#panel").click( function () {
            $( this).animate({ left : "200px", height : "300px", opacity : "1" }, 2000, function () { $( this).css( "border", "5px solid blue"); })
            .delay( 2000)
            .animate({ top : "200px", width : "300px" }, 2000, function () { $( this).css( "background-color", "Green"); })
            .delay( 2000)
            .fadeOut( "slow");
        });
    });
< /script >

 

jQuery中的其他動畫方法：

    ->toggle(speed,[callback]);

    ->slideToggle(speed,[easing],[callback]);

    ->fadeTo(speed,opacity,[callback]);

    ->fadeToggle(speed,[easing],[callback]);

 ①toggle()：

    toggle方法可以切換元素的可見狀態，如果元素當前是可見的，則切換為隱藏的，如果是隱藏的，則切換為可見的；

 ②slideToggle():

    此方法通過高度變化來切換匹配元素的可見性；效果和toggle相同，不過這個動畫是調整元素的高度來顯示和隱藏元素的，相當於slideDown和slideUp；

 ③fadeTo()：

    此方法把元素的不透明度以漸進的方式調整到指定的值，值調整不透明度，元素的高度和寬度不變！

 ④fadeToggle()：

    通過不透明度變化來切換匹配元素的可見性，值調整不透明度，相當於fadeOut和fadeIn；

 

總結：

方法名	說明
hide(),show()	同時修改多個樣式屬性：高度、寬度、不透明度
fadeIn(),fadeOut()	只改變不透明度
slideUp(),slideDown()	只改變高度
fadeTo()	只改變不透明度
toggle()	用來代替hide方法和show方法，同hide，show方法
slideToggle()	用來代替slideUp和slideDown方法
fadeToggle()	用來代替fadeIn和fadeOut方法
animate()	自定義動畫的方法，以上各種動畫方法實質內部都調用了animate方法，此外，直接使用animate方法 還可以自定義其他樣式屬性。也就是說，可以用animate代替其他所有的動畫方法；

 

通過 為知筆記 發布