jQuery 動畫animate，顯示隱藏，淡入淡出，下拉切換,過渡效果

時間 2019-11-13

標籤 jquery 動畫 animate 顯示隱藏淡入淡出下拉切換過渡效果欄目 JQuery 简体版

原文原文鏈接

本文屬轉摘：

1.jQuery中隱藏元素的hide方法

讓頁面上的元素不可見，通常能夠經過設置css的display爲none屬性。可是經過css直接修改是靜態的佈局，若是在代碼執行的時候，通常是經過js控制元素的style屬性，這裏jQuery提供了一個快捷的方法.hide()來達到這個效果

$elem.hide()

提供參數：

.hide( options ) 當提供hide方法一個參數時，.hide()就會成爲一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做

$("button:last").click(function() {

$("#a2").hide({

duration: 3000,

})

});

2.jQuery中顯示元素的show方法

hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

- show與hide方法是修改的display屬性，經過是visibility屬性佈局須要經過css方法單獨設置

- 若是使用!important在你的樣式中，好比display: none !important，若是你但願.show()方法正常工做，必須使用.css('display', 'block !important')重寫樣式

- 若是讓show與hide成爲一個動畫，那麼默認執行動畫會改變元素的高度，高度，透明度

3.jQuery中顯示與隱藏切換toggle方法

基本的操做：toggle();

這是最基本的操做，處理元素顯示或者隱藏，由於不帶參數，因此沒有動畫。經過改變CSS的display屬性，匹配的元素將被當即顯示或隱藏，沒有動畫。

- 若是元素是最初顯示，它會被隱藏

- 若是隱藏的，它會顯示出來

display屬性將被儲存而且須要的時候能夠恢復。若是一個元素的display值爲inline，而後是隱藏和顯示，這個元素將再次顯示inline

提供參數：.toggle( [duration ] [, complete ] )

一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程當中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

$("button:last").click(function() {

$(".right").toggle(3000)

});

4.jQuery中下拉動畫slideDown

.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會致使頁面的下面部分滑下去，彌補了顯示的方式

常見的操做，提供一個動畫是時間，而後傳遞一個回調，用於知道動畫是何時結束

.slideDown( [duration ] [, complete ] )

持續時間（duration）是以毫秒爲單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400 毫秒的延時。

具體使用：

$("ele").slideDown(1000, function() {
//等待動畫執行1秒後,執行別的動做....
});

注意事項：

- 下拉動畫是從無到有，因此一開始元素是須要先隱藏起來的，能夠設置display:none

- 如果提供回調函數參數，callback會在動畫完成的時候調用。將不一樣的動畫串聯在一塊兒按順序排列執行是很是有用的。這個回調函數不設置任何參數，可是 this會設成將要執行動畫的那個DOM元素，若是多個元素一塊兒作動畫效果，那麼要很是注意，回調函數會在每個元素執行完動畫後都執行一次，而不是這組動畫總體才執行一次

$("button:last").click(function() {

$("#a2").slideDown(3000,function(){

alert('動畫執行結束')

})

});

5.jQuery中上捲動畫slideUp

最簡單的使用：不帶參數

$("elem").slideUp();

這個使用的含義就是：找到元素的高度，而後採用一個下滑動畫讓元素一直滑到隱藏，當高度爲0的時候，也就是不可見的時，修改元素display 樣式屬性被設置爲none。這樣就能確保這個元素不會影響頁面佈局了

帶參數：

.slideUp( [duration ] [, easing ] [, complete ] )

一樣能夠提供一個時間，而後可使用一種過渡使用哪一種緩動函數，jQuery默認就2種，能夠經過下載插件支持。最後一個動畫結束的回調方法。

由於動畫是異步的，因此要在動畫以後執行某些操做就必需要寫到回調函數裏面，這裏要特別注意

$("button:last").click(function() {

$("#a2").slideUp(3000,function(){

alert('動畫執行結束')

})

});

6.jQuery中上卷下拉切換slideToggle

jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素

基本的操做：slideToggle();

這是最基本的操做，獲取元素的高度，使這個元素的高度發生改變，從而讓元素裏的內容往下或往上滑。

提供參數：.slideToggle( [duration ] ,[ complete ] )

一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，而後出發回調函數

同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時

注意：

- display屬性值保存在jQuery的數據緩存中，因此display能夠方便之後能夠恢復到其初始值

- 當一個隱藏動畫後，高度值達到0的時候，display 樣式屬性被設置爲none，以確保該元素再也不影響頁面佈局

$("button").click(function() {

$("#a1").slideToggle(3000)

});

7.jQuery中淡出動畫fadeOut

設置元素透明度爲0，可讓元素不可見，透明度的參數是0~1之間的值，經過改變這個值可讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。

fadeOut()函數用於隱藏全部匹配的元素，並帶有淡出的過渡動畫效果

所謂"淡出"隱藏的，元素是隱藏狀態不對做任何改變，元素是可見的，則將其隱藏。

.fadeOut( [duration ], [ complete ] )

經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。

字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400毫秒的延時

$("p").fadeOut();

$("p").fadeOut({

duration: 1000

});

$("p").fadeOut(2000, function() {

alert("隱藏完畢!");

});

8.jQuery中淡入動畫fadeIn

fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上二者都是一致的，只是結果相反

.fadeIn( [duration ], [ complete ] )

- duration：指定過渡動畫運行多長時間(毫秒數)，默認值爲400。該參數也能夠爲字符串"fast"(=200)或"slow"(=600)。

- 元素顯示完畢後須要執行的函數。函數內的this指向當前DOM元素。

fadeIn()函數用於顯示全部匹配的元素，並帶有淡入的過渡動畫效果。

注意：

- 淡入的動畫原理：操做元素的不透明度從0%逐漸增長到100%

- 若是元素自己是可見的，不對其做任何改變。若是元素是隱藏的，則使其可見

9.jQuery中淡入淡出切換fadeToggle

fadeToggle()函數用於切換全部匹配的元素，並帶有淡入/淡出的過渡動畫效果。以前也學過toggle、slideToggle 也是相似的處理方式

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即若是元素當前是可見的，則將其隱藏(淡出)；若是元素當前是隱藏的，則使其顯示(淡入)。

經常使用語法：.fadeToggle( [duration ] ,[ complete ] )

可選的 duration 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。

fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

（和上面的方式同樣）

10.jQuery中淡入效果fadeTo

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，可是他們都有個共同的特色，變化的區間要麼是0，要麼是1

fadeIn：淡入效果，內容顯示，opacity是0到1
fadeOut：淡出效果，內容隱藏，opacity是1到0

若是要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？

若是不考慮CSS3，咱們用JS實現的話，基本就是經過定時器，在設定的時間內一點點的修改opacity的值，最終爲0.5，原理雖然說簡單，可是總不如一鍵設置這麼舒服，jQuery提供了fadeTo方法，可讓改變透明度一步到位

語法

.fadeTo( duration, opacity ,callback)

必需的 duration參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。

$("p").fadeTo("slow", 0.5);

$("p").fadeTo(1000, 0.2);

$("p").fadeTo(1000, 0.9, function() {

alert('完成')

});

11.jQuery中toggle與slideToggle以及fadeToggle的比較

操做元素的顯示和隱藏能夠有幾種方法。

例如：

- 改變樣式display爲none

- 設置位置高度爲0

- 設置透明度爲0

都能達到這個目的，而且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此以外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區別：

- toggle：切換顯示與隱藏效果

- sildeToggle：切換上下拉卷滾效果

- fadeToggle：切換淡入淡出效果

固然細節上仍是有更多的不一樣點:

toggle與slideToggle細節區別：

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

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

fadeToggle方法

- fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

- 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

- 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

- 註釋：隱藏的元素不會被徹底顯示（再也不影響頁面的佈局）

12.jQuery中動畫animate(上)

有些複雜的動畫經過以前學到的幾個動畫函數是不可以實現，這時候就須要強大的animate方法了

操做一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別

語法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法容許咱們在任意的數值的CSS屬性上建立動畫。2種語法使用，幾乎差很少了，惟一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對相似，除了屬性範圍作了更多限制。第二個參數開始能夠單獨傳遞多個實參也能夠合併成一個對象傳遞了

參數分解：properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意全部用於動畫的屬性必須是數字的，除非另有說明；這些屬性若是不是數字的將不能使用基本的jQuery功能。好比常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不能夠，由於參數是red或者GBG這樣的值，很是用插件，不然正常狀況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（好比 "fontSize"）來設置，而非 CSS 名稱（好比 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %須要指定使用

.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500);

除了定義數值，每一個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式容許定製隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({
width: "toggle"
});

若是提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({
left: '+=50px'
}, "slow");

duration時間

動畫執行的時間，持續時間是以毫秒爲單位的；值越大表示動畫執行的越慢，不是越快。還能夠提供'fast' 和 'slow'字符串，分別表示持續時間爲200 和 600毫秒。

easing動畫運動的算法

jQuery庫中默認調用 swing。若是須要其餘的動畫算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個能夠保證當前動畫肯定完成後發會觸發

if (v == "1") {

// 數值的單位默認是px

$aaron.animate({

width :300,

height :300

});

} else if (v == "2") {

// 在現有高度的基礎上增長100px

$aaron.animate({

width : "+=100px",

height : "+=100px"

});

} else if (v == "3") {

$aaron.animate({

fontSize: "5em"

}, 2000, function() {

alert("動畫 fontSize執行完畢!");

});

} e lse if (v == "4") {

//經過toggle參數切換高度

$aaron.animate({

width: "toggle"

});

}

13.jQuery中動畫animate(下)

animate在執行動畫中，若是須要觀察動畫的一些執行狀況，或者在動畫進行中的某一時刻進行一些其餘處理，咱們能夠經過animate提供的第二種設置語法，傳遞一個對象參數，能夠拿到動畫執行狀態一些通知

.animate( properties, options )

options參數

- duration - 設置動畫執行的時間

- easing - 規定要使用的 easing 函數，過渡使用哪一種緩動函數

- step：規定每一個動畫的每一步完成以後要執行的函數

- progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念

- complete：動畫完成回調

其中最關鍵的一點就是：

若是多個元素執行動畫，回調將在每一個匹配的元素上執行一次，不是做爲整個動畫執行一次

列出經常使用的方式：

$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});

14.jQuery中中止動畫stop

動畫在執行過程當中是容許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（若是有的話）當即中止

語法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop還有幾個可選的參數，簡單來講能夠這3種狀況

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

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

- .stop(true,true); 當前動畫將中止，但該元素上的 CSS 屬性會被馬上修改爲動畫的目標值

簡單的說：參考下面代碼、

$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)

- stop()：只會中止第一個動畫，第二個第三個繼續

- stop(true)：中止第一個、第二個和第三個動畫

- stop(true ture)：中止動畫，直接跳到第一個動畫的最終狀態

15.jQuery中each方法的應用

jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的緣由的就是jQuery的實例是一個元素合集

以下：找到全部的div，而且都設置樣式，css只是一個方法，因此內部會調用each處理這個div的合集，給每一個div都設置style屬性

$('div').css(...)

jQuery的大部分方法都是針元素合集的操做，因此jQuery會提供$(selector).each()來遍歷jQuery對象

.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數組的遍歷

語法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一個參數傳遞的就是一個對象或者數組，第二個是回調函數

$.each(["Aaron", "慕課網"], function(index, value) {
//index是索引,也就是數組的索引
//value就是數組中的值了
});

each就是for循環方法的一個包裝，內部就是經過for遍歷數組與對象，經過回調函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同

jQuery.each()函數還會根據每次調用函數callback的返回值來決定後續動做。若是返回值爲false，則中止循環(至關於普通循環中的break)；若是返回其餘任何值，均表示繼續執行下一個循環。

$.each(["Aaron", "慕課網"], function(index, value) {
return false; //中止迭代
});

jQuery方法能夠很方便的遍歷一個數據，不須要考慮這個數據是對象仍是數組

// 遍歷數組元素

$.each(['Aaron', '慕課網'], function(i, item) {

$aaron.append("索引=" + i + "; 元素=" + item);

});

$.each({

name: "張三",

age: 18

}, function(property, value) {

$aaron.append("屬性名=" + property + "; 屬性值=" + value);

});

16.jQuery中查找數組中的索引inArray

在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，可是jQuery封裝了inArray()函數判斷元素是否存在數組中。注意了：在ECMAScript5已經有數據的indexOf方法支持了，可是jQuery保持了版本向下兼容，因此封裝了一個inArray方法

jQuery.inArray()函數用於在數組中搜索指定的值，並返回其索引值。若是數組中不存在該值，則返回 -1。

語法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法很是簡單，傳遞一個檢測的目標值，而後傳遞原始的數組，能夠經過fromIndex規定查找的起始值，默認數組是0開始

例如：在數組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4

注意：

若是要判斷數組中是否存在指定值，你須要經過該函數的返回值不等於(或大於)-1來進行判斷

if (v == "1") {

var index = $.inArray('Aaron',['test','Aaron', 'array','慕課網']);

$aaron.text('Aaron的索引是: '+ index)

} else if (v == "2") {

//指定索引開始的位置

var index = $.inArray('a',['a','b','c','d','a','c'],2);

$aaron.text('a的索引是: '+ index)

}

17.jQuery中去空格神器trim方法

頁面中，經過input能夠獲取用戶的輸入值，例如常見的登陸信息的提交處理。用戶的輸入不必定是標準的，輸入一段密碼：' 1123456 "，注意了：密碼的先後會留空，這多是用戶的無意的行爲，可是密碼確實又沒錯，針對這樣的行爲，開發者應該要判斷輸入值的先後是否有空白符、換行符、製表符這樣明顯的無心義的輸入值。

jQuery.trim()函數用於去除字符串兩端的空白字符

這個函數很簡單，沒有多餘的參數用法

須要注意：

- 移除字符串開始和結尾處的全部換行符，空格(包括連續的空格)和製表符（tab）

- 若是這些空白字符在字符串中間時，它們將被保留，不會被移除

alert("值的長度：" + $.trim($("#results2").val()).length)