jQuery動畫特效

本文主要跟你們分享jQuery隱藏與顯示（hide，show，toggle） 上卷與下拉（slideDown，slideUp,slideToggle） 淡入淡出（fadeOut，fadeIn，fadeToggle，fadeTo） 自定義動畫（animate,stop）

1、jQuery的隱藏和顯示動畫

在jQuery中，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

$('p').hide();
$('p').show();

固然，你能夠給元素加上鼠標事件，例如當點擊某個元素的時候，可讓它隱藏或者顯示；

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

在jQuery中還有一種更方便的方法控制元素的隱藏和顯示，即經過toggle()來回的切換hide()和show()方法；這樣上面的代碼就能夠這樣寫：

$("button").click(function(){
  $("p").toggle();
});

當給這幾個方法加入參數時，它們就會成爲一個動畫方法。咱們就拿hide()方法舉例:

$('p').hide(speed,callback);

hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做，快捷參數：.hide("fast/slow")：
例如：

$("button").click(function() {
   $('p').hide({
     duration:3000,
     complete:function() {
        alert('3000ms動畫執行完畢')
     }
   });
});

或者：

$("button").click(function() {
   $('p').hide(3000,function() {
      alert('3000ms動畫執行完畢');
   });
});

注意：

1. show與hide方法是修改元素的display屬性，經過visibility屬性修改須要經過css方法單獨設置
2. 若是樣式中使用！important，好比display:none !important，想讓.show()方法正常工做，必須使用.css('display','block !important')重寫樣式。
3. 若是讓show與hide成爲一個動畫，那麼默認執行動畫會改變元素的高度，透明度；

2、上卷下拉效果

jQuery中下拉動畫能夠由slideDown()實現，
用法：$(selector).slideDown(speed,callback);

可選的speed參數規定效果的時長。它能夠取如下值：「slow」，「fast」或毫秒值。

可選的callback參數是滑動完成後所執行的函數名稱。

例：

$("button").click(function() {
  $('p').slideDown(3000);
});

同理的下拉動畫能夠由sildeUp()實現，它的語法也和上卷方法類似，同時還可使用slideToggle()方法在sildeDown()與slideUp()方法之間切換。實現的方法也與上卷的類似，在這裏我就不寫出來了。

3、淡入淡出效果

jQuery的淡入淡出效果能夠由fadeOut(),fadeIn()或者fadeToggle()實現，這裏就介紹一下fadeOut()方法，其餘兩個也是類似的；

用法：$(selector).fadeOut(speed,callback);

可選的speed參數規定效果的時長。它能夠取如下值：「slow」，「fast」或毫秒。

可選的callback參數是fading完成後所執行的函數名稱。

例：

$('button').click(function() {
   $('#div1').fadeOut();
   $('#div2').fadeOut("slow");
   $('#div3').fadeOut(3000);
});

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，可是他們都有個共同的特色，變化的區間要麼是0，要麼是1，當opacity的值爲0時，即隱藏該元素設置爲display:none;

那麼在這裏就要介紹一個特殊的淡入效果fadeTo();
fadeTo()方法容許漸變爲給定的不透明度(值介於0與1之間).

$(selector).fadeTo(speed,opacity,callback);

必須的speed參數規定效果的時長。它能夠取如下值：「slow」，「fast」或毫秒。

jQuery中toggle與slideToggle以及fadeToggle的比較：

(1)toggle：切換顯示與隱藏效果。
(2)sildeToggle：切換上下拉卷效果。
(3)fadeToggle：卻還淡入淡出效果。

toggle與slideToggle細節區別：

(1) toggle:動態效果爲從右至左，橫向動做，toggle經過display來判斷切換全部匹配元素的可見性；

(2)slideToggle：動態效果從下至上，豎向動做，slideToggle經過高度變化來切換全部匹配元素的可見性。

4、自定義動畫

jQuery中動畫由animation()方法實現。

用法：$(selector).animation({params},speed,callback);

必須的params參數定義造成動畫的css屬性，json寫法。

可選的speed參數規定效果的時長，它能夠取如下值：「slow」，「fast」或毫秒。

可選的callback參數是動畫完成後所執行的函數名稱。

例：

$(selector).click(function() {
  $("div").animation({
    left:'100px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
    });
});

注意：

當使用animation()時，必須使用camel標記法書寫全部的屬性名，好比，必須使用paddingLeft而不是padding-left。

animation()使用相對值，能夠定義相對值（該值相對於元素的當前值），須要在值的前面加上+=或-=；

例：

$("button").click(function() {
   $('div').animation({
     left:'100px',
     height:'+=150px',
     width:'+=100px'
     });
});

animation()使用隊列功能，若是你在彼此以後編寫多個animation（）調用，jQuery會建立包含這些方法調用的內部隊列。而後逐一運行這些animation調用。

5、jQuery其餘核心方法

jQuery中中止動畫stop

stop（）方法用於中止動畫或效果，在它們完成以前。stop()方法使用於全部jQuery效果函數，包括滑動、淡入淡出和自定義動畫。

用法：$(selector).stop(stopAll,goToEnd);

可選的stopAll參數規定是否應該清除動畫隊列。默認是false，即僅中止活動的動畫，運行任何排入隊列的動畫向後執行。

可選的goToEnd參數規定是否當即完成當前動畫。默認是false。

所以，默認地，stop()會清除在被選元素上指定的當前動畫。

(1)、stop()中止當前動畫，點擊在暫停處繼續開始

(2)、stop(true);若是統一元素調用多個動畫方法，還沒有被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，知道第一個完成。當調用.stop()的時候，隊列中的下一個動畫當即開始。若是goTOEnd參數提供true值，那麼在隊列的動畫被刪除並永遠不會運行。

(3)、stop(true,true)；當前動畫將中止，但該元素上的css屬性被馬上改爲動畫的目標值。

例：

$('button').animation({
  height:300
},5000);

$('button').animation({
  width:300
},500);

$('button').animation({
  opacity:0.6
},5000);

分析：

（1）、stop（）；只會中止第一個動畫，第二第三個繼續；

（2）、stop（true）；中止全部動畫；

（3）、stop（true，true）；中止動畫，直接跳到第一個動畫的最終狀態。

謝謝你們閱讀本文章，有什麼建議均可以在評論中寫出來，我會積極修改。