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

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

一、jQuery的隱藏和顯示動(dòng)畫(huà)

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

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

當(dāng)然，你可以給元素加上鼠標(biāo)事件，例如當(dāng)點(diǎn)擊某個(gè)元素的時(shí)候，可以讓它隱藏或者顯示；

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

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

在jQuery中還有一種更方便的方法控制元素的隱藏和顯示，即通過(guò)toggle()來(lái)回的切換hide()和show()方法；這樣上面的代碼就可以這樣寫(xiě)：

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

當(dāng)給這幾個(gè)方法加入?yún)?shù)時(shí)，它們就會(huì)成為一個(gè)動(dòng)畫(huà)方法。我們就拿hide()方法舉例:

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

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

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

或者：

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

注意：

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

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

如果讓show與hide成為一個(gè)動(dòng)畫(huà)，那么默認(rèn)執(zhí)行動(dòng)畫(huà)會(huì)改變?cè)氐母叨龋该鞫龋?/p>

二、上卷下拉效果

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

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

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

例：

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

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

三、淡入淡出效果

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

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

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

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

例：

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

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

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

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

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

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

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

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

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

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

四、自定義動(dòng)畫(huà)

jQuery中動(dòng)畫(huà)由animation()方法實(shí)現(xiàn)。

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

必須的params參數(shù)定義形成動(dòng)畫(huà)的css屬性，json寫(xiě)法。

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

可選的callback參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱(chēng)。

例：

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

注意：

當(dāng)使用animation()時(shí)，必須使用camel標(biāo)記法書(shū)寫(xiě)所有的屬性名，比如，必須使用paddingLeft而不是padding-left。

animation()使用相對(duì)值，可以定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值），需要在值的前面加上+=或-=；

例：

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

animation()使用隊(duì)列功能，如果你在彼此之后編寫(xiě)多個(gè)animation（）調(diào)用，jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的內(nèi)部隊(duì)列。然后逐一運(yùn)行這些animation調(diào)用。

五、jQuery其他核心方法

jQuery中停止動(dòng)畫(huà)stop

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

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

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

可選的goToEnd參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是false。

因此，默認(rèn)地，stop()會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)。

(1)、stop()停止當(dāng)前動(dòng)畫(huà)，點(diǎn)擊在暫停處繼續(xù)開(kāi)始

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

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

例：

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

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

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

分析：

（1）、stop（）；只會(huì)停止第一個(gè)動(dòng)畫(huà)，第二第三個(gè)繼續(xù)；

（2）、stop（true）；停止所有動(dòng)畫(huà)；

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

謝謝大家閱讀本文章，有什么建議都可以在評(píng)論中寫(xiě)出來(lái)，我會(huì)積極修改。