jQuery（5）——動畫

標籤：

jQuery中的動畫

【show()方法和hide()方法】

在HTML文檔中，為一個元素調用hide()方法，會將該元素的display樣式改為“none”，show()方法將元素的display樣式改為先前的顯示狀態。

$(function(){    $("#pane1 h5.head").toggle(function(){        $(this).next().hide();    }.function(){        $(this).next().show();    });});

用jQuery做動畫效果要求要在標準模式下，否則可能會引起動畫抖動。

讓元素動起來

如果希望在調用show()方法時，元素慢慢的顯示出來，可以為show()方法指定一個速度參數。如，指定一個速度關鍵字“slow”

$("element").show("slow");

運行該代碼後，元素將在600毫秒內慢慢地顯示出來，還有其他關鍵字“normal”和“fast”。還可以為顯示速度指定一個數字，單位是毫秒。

【fadeIn()方法和fadeOut()方法】

此方法只改變元素的不透明度。fadeOut()方法會在指定的一段時間內降低元素的不透明度，知道元素完全消失，fadeIn()則相反。

$(function(){    $("#pane1 h5.head").toggle(function(){        $(this).next().fadeOut();    }.function(){        $(this).next().fadeIn();    });});

【slideUp()方法和slideDown()方法】

此方法只會改變元素的高度。如果一個元素的display屬性值為“none”，當調用slideDown()方法時，這個元素將由上至下延伸顯示。slideUp()方法正好相反。

【自訂動畫方法animate()】

文法結構：animate(params,speed,callback);

參數說明:params:一個包含樣式屬性及值的映射，比如{property:"value1",property2:"value2",.....}。

　　　　speed：速度參數，可選。

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

自訂簡單動畫：

$(function(){    $("pane1").click(function(){        $(this).animate({left:"500px"},3000);     });});

作用：使元素在3秒內，向右移動500像素。且css代碼中設定的是“position:relative”。

累加、累減動畫：在500px之前加上“+=”或者“-=”符號即可表示在當前位置累加或者累減。{left:"+=500px",3000};

多重動畫

（1）同時執行多個動畫：

$(function(){    $("myImg").click(function(){       $(this) .animate({left:"500px",height:"200px"},3000);  //<div>元素在向右滑動同時，也會放大高度    });});

（2）按順序執行多個動畫：只需要把代碼拆開，然後按照順序寫。

$(this).animate({left:"500px"},3000);$(this).animate({height:"500px"},3000);//也可以改為鏈式寫法$(this).animate({left:"500px"},3000);        .animate({height:"500px"},3000);

綜合動畫

【動畫回呼函數】

可以使用回呼函數（callback）對非動畫方法實現排隊。只要把css()方法寫在最後一個動畫的回呼函數裡即可：

$("pane1").click(function(){    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)              .animate({top:"200px",width:"200px"},3000)               $(this).css("border","5px solid blue");            })});

callback回呼函數適用於jQuery所有的動畫效果方法。

【停止動畫和判斷是否處於動畫狀態】

停止元素的動畫：stop()方法。文法結構：stop([clearQueue],[gotoEnd]);參數clearQueue和gotoEnd都是選擇性參數，為Boolean值。clearQueue代表是否要清空未執行完的動畫隊列，gotoEnd代表是否直接將進行中的動畫跳轉到末狀態。

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

if(!$(element).is(":animated")){   //判斷元素是否正處於動畫狀態      //如果當前沒有進行動畫，則添加新動畫}

延遲動畫：delay()方法。可以將隊列中的函數順延強制。它既可以延遲動畫隊列中函數的執行，也可以用於自訂隊列。

【其他動畫方法】

toggle()方法：切換元素的可見狀態。

slideToggle()方法：通過高度變化來切換匹配元素的可見度。

fadeTo()方法：可以把元素的不透明以漸進方式調整到指定的值。

fadeToggle()方法:通過不透明度來切換匹配元素的可見度。

【動畫方法概括】

特別注意animate()方法，可以使用它來替代其他所有的動畫方法。詳情在《鋒利的jQuery》P132頁。

jQuery（5）——動畫