摘要：可選的參數(shù)規(guī)定效果的時長，它可以取以下值，或毫秒。五其他核心方法中停止動畫方法用于停止動畫或效果，在它們完成之前。默認是，即僅停止活動的動畫，運行任何排入隊列的動畫向后執(zhí)行。這些動畫不會開始，知道第一個完成。

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

一、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();
});

當給這幾個方法加入?yún)?shù)時，它們就會成為一個動畫方法。我們就拿hide()方法舉例:

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

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

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

或者：

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

注意：

show與hide方法是修改元素的display屬性，通過visibility屬性修改需要通過css方法多帶帶設(shè)置

如果樣式中使用！important，比如display:none !important，想讓.show()方法正常工作，必須使用.css("display","block !important")重寫樣式。

如果讓show與hide成為一個動畫，那么默認執(zhí)行動畫會改變元素的高度，透明度；

二、上卷下拉效果

jQuery中下拉動畫可以由slideDown()實現(xiàn)，
用法：$(selector).slideDown(speed,callback);

可選的speed參數(shù)規(guī)定效果的時長。它可以取以下值：“slow”，“fast”或毫秒值。

可選的callback參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

例：

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

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

三、淡入淡出效果

jQuery的淡入淡出效果可以由fadeOut(),fadeIn()或者fadeToggle()實現(xiàn)，這里就介紹一下fadeOut()方法，其他兩個也是相似的；

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

可選的speed參數(shù)規(guī)定效果的時長。它可以取以下值：“slow”，“fast”或毫秒。

可選的callback參數(shù)是fading完成后所執(zhí)行的函數(shù)名稱。

例：

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

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區(qū)間要么是0，要么是1，當opacity的值為0時，即隱藏該元素設(shè)置為display:none;

那么在這里就要介紹一個特殊的淡入效果fadeTo();
fadeTo()方法允許漸變?yōu)榻o定的不透明度(值介于0與1之間).

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

必須的speed參數(shù)規(guī)定效果的時長。它可以取以下值：“slow”，“fast”或毫秒。

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

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

toggle與slideToggle細節(jié)區(qū)別：

(1) toggle:動態(tài)效果為從右至左，橫向動作，toggle通過display來判斷切換所有匹配元素的可見性；

(2)slideToggle：動態(tài)效果從下至上，豎向動作，slideToggle通過高度變化來切換所有匹配元素的可見性。

四、自定義動畫

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

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

必須的params參數(shù)定義形成動畫的css屬性，json寫法。

可選的speed參數(shù)規(guī)定效果的時長，它可以取以下值：“slow”，“fast”或毫秒。

可選的callback參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。

例：

$(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（）調(diào)用，jQuery會創(chuàng)建包含這些方法調(diào)用的內(nèi)部隊列。然后逐一運行這些animation調(diào)用。

五、jQuery其他核心方法

jQuery中停止動畫stop

stop（）方法用于停止動畫或效果，在它們完成之前。stop()方法使用于所有jQuery效果函數(shù)，包括滑動、淡入淡出和自定義動畫。

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

可選的stopAll參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認是false，即僅停止活動的動畫，運行任何排入隊列的動畫向后執(zhí)行。

可選的goToEnd參數(shù)規(guī)定是否立即完成當前動畫。默認是false。

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

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

(2)、stop(true);如果統(tǒng)一元素調(diào)用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，知道第一個完成。當調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果goTOEnd參數(shù)提供true值，那么在隊列的動畫被刪除并永遠不會運行。

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

例：

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

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

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

分析：

（1）、stop（）；只會停止第一個動畫，第二第三個繼續(xù)；

（2）、stop（true）；停止所有動畫；

（3）、stop（true，true）；停止動畫，直接跳到第一個動畫的最終狀態(tài)。

謝謝大家閱讀本文章，有什么建議都可以在評論中寫出來，我會積極修改。