一．顯示、隱藏
jQuery 中顯示方法為：.show()，隱藏方法為：.hide()。在無參數的時候，只是硬性的顯示內容和隱藏內容。
|
1
2
3
4
5
6
|
$('.show').click(function(){ //設置個觸發事件 $('#box').show(); //顯示 });$('.hide').click(function(){ //設置個觸發事件 $('#box').hide(); //隱藏}); |
在.show()和.hide()方法可以傳遞一個參數，這個參數以毫秒(1000 毫秒等于 1 秒鐘)來控 制速度。并且里面富含了勻速變大變小，以及透明度變換。
|
1
2
3
4
5
|
$('.show').click(function(){ $('#box').show(1000); //顯示用了 1 秒 }); $('.hide').click(function(){ $('#box').hide(1000); //隱藏用了 1 秒 }); |
除了直接使用毫秒來控制速度外，jQuery 還提供了三種預設速度參數字符串：slow、 normal 和 fast，分別對應 600 毫秒、400 毫秒和 200 毫秒。
|
1
2
3
|
$('#box').show('slow'); //600 毫秒 $('#box').show('normal'); //400 毫秒 $('#box').show('fast'); //200 毫秒 |
注意：不管是傳遞毫秒數還是傳遞預設字符串，如果不小心傳遞錯誤或者傳遞空字符串。 那么它將采用默認值：400 毫秒。
使用.show()和.hide()的回調函數，可以實現列隊動畫效果。
（1）使用函數名調用自身
|
1
2
3
4
5
|
$('.show').click(function(){ $('#box').show('slow',function showspan(){ $(this).next().show('slow',showspan); });}) |
（2）使用 arguments.callee 匿名函數自調用
|
1
2
3
4
5
|
$('.show').click(function(){ $('#box').show('slow',function(){ $(this).next().show('slow',arguments.callee); });}) |
我們在使用.show()和.hide()的時候，如果需要一個按鈕切換操作，需要進行一些條件判 斷。而 jQuery 提供給我們一個類似功能的獨立方法：.toggle()。
|
1
2
3
|
$('.toggle').click(function(){ $(this).toggle('slow'); }); |
二．滑動、卷動 jQuery 提供了一組改變元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顧名 思義，向上收縮(卷動)和向下展開(滑動)。
|
1
2
3
4
5
6
7
8
9
|
$('.down').click(function(){ //向下滑動 $('#box').slideDown(); });$('.up').click(function(){ //向上滑動 $('#box').slideUp(); });$('.toggle').click(function(){ //切換 $('#box').slideToggle(); }); |
注意：滑動、卷動效果和顯示、隱藏效果一樣，具有相同的參數。
三．淡入、淡出
jQuery 提供了一組專門用于透明度變化的方法：.fadeIn()和.fadeOut()，分別表示淡入、 淡出，當然還有一個自動切換的方法：.fadeToggle()。
|
1
2
3
4
5
6
7
8
9
|
$('.in').click(function(){ //淡入 $('#box').fadeIn('slow'); });$('.out').click(function(){ //淡出 $('#box').fadeOut('slow'); });$('.toggle').click(function(){ //切換 $('#box').fadeToggle(); }); |
上面三個透明度方法只能是從 0 到 100，或者從 100 到 0，如果我們想設置指定值就沒 有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()方法。
|
1
2
3
|
$('.toggle').click(function(){ $('#box').fadeTo('slow',0.33); //0.33 表示值為 33%}); |
ps：值數為0到1，對應百分比
四．自定義動畫
jQuery 提供了幾種簡單常用的固定動畫方面我們使用。但有些時候，這些簡單動畫無法 滿足我們更加復雜的需求。這個時候，jQuery 提供了一個.animate()方法來創建我們的自定
義動畫，滿足更多復雜多變的要求。
|
1
2
3
4
5
6
7
|
$('.animate').click(function(){ $('#box').animate({ 'width':'300px', 'fontSize':'50px', 'opacity':0.5 }); }); |
注意：一個 CSS 變化就是一個動畫效果，上面的例子中，已經有四個 CSS 變化，已經 實現了多重動畫同步運動的效果。
必傳的參數只有一個，就是一個鍵值對 CSS 變化樣式的對象。還有兩個可選參數分別 為速度和回調函數。
|
1
2
3
4
5
6
7
8
|
$('.animate').click(function(){ $('#box').animate({ 'width':'500px', 'height':'400px', },2000,function(){ alert('執行完畢')； })；})； |
到目前位置，我們都是創建的固定位置不動的動畫。如果想要實現運動狀態的位移動畫， 那就必須使用自定義動畫，并且結合 CSS 的絕對定位功能。
|
1
2
3
4
5
6
|
$('.animate').click(function(){ $('#box').animate({ 'top':'300px', //先必須設置 CSS 絕對定位 'left':'200px' }); }); |
ps：必須先在css里設置參照物，絕對定位
自定義動畫中，每次開始運動都必須是初始位置或初始狀態，而有時我們想通過當前位 置或狀態下再進行動畫。jQuery 提供了自定義動畫的累加、累減功能。
|
1
2
3
4
5
6
7
|
$('.animate').click(function(){ $('#box').animate({ left:'+=100px', width:'+=100px', height:'+=100px' }); }); |
五．列隊動畫方法
之前我們已經可以實現列隊動畫了，如果是同一個元素，可以依次順序或連綴調用。如 果是不同元素，可以使用回調函數。但有時列隊動畫太多，回調函數的可讀性大大降低。為 此，jQuery 提供了一組專門用于列隊動畫的方法。
//連綴無法實現按順序列隊
$('#box').slideUp('slow').slideDown('slow').css('background','orange');
注意：如果動畫方法，連綴可以實依次列隊，而.css()方法不是動畫方法，會在一開始傳入列隊之前。那么，可以采用動畫方法的回調函數來解決。
|
1
2
3
4
|
//使用回調函數，強行將.css()方法排隊到.slideDown()之后$('#box').slideUp('slow').slideDown('slow',function({ $(this).css('background','orange'); }); |
但如果這樣的話，當列隊動畫繁多的時候，可讀性不但下降，而原本的動畫方法不夠清 晰。所以，我們的想法是每個操作都是自己獨立的方法。那么 jQuery 提供了一個類似于回 調函數的方法：.queue()。
|
1
2
3
4
|
//使用.queue()方法模擬動畫方法跟隨動畫方法之后$('#box').slideUp('slow').slideDown('slow').queue(function(){ $(this).css('background','orange'); }); |
現在，我們想繼續在.queue()方法后面再增加一個隱藏動畫，這時發現居然無法實現。 這是.queue()特性導致的。解決方法：jQuery的.queue()的回調函數可以 傳遞一個參數，這個參數是 next 函數，在結尾處調用這個 next()方法即可再連綴執行列隊動畫。
|
1
2
3
4
|
//使用 next 參數來實現繼續調用列隊動畫 $('#box').slideUp('slow').slideDown('slow').queue(function(next{ $(this).css('background','orange'); next(); }).hide('slow'); |
ps：.queue()方法還有一個功能，就是可以得到當前動畫個列隊的長度（具體不做演示）
jQuery 還提供了一個清理列隊的功能方法：.clearQueue()。把它放入一個列隊的回調函 數或.queue()方法里，就可以把剩下為執行的列隊給移除。
|
1
2
3
4
|
//清理動畫列隊 $('#box').slideDown('slow',function(){ $(this).clearQueue()}); |
六．動畫相關方法
很多時候需要停止正在運行中的動畫，jQuery 為此提供了一個.stop()方法。它有兩個可 選參數：.stop(clearQueue,gotoEnd)；clearQueue 傳遞一個布爾值，代表是否清空未執行完的 動畫列隊，gotoEnd 代表是否直接將正在執行的動畫跳轉到末狀態。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$('.animate').click(function(){ $('#box').animate({ 'left':'300px' },1000); $('#box').animate({ 'top':'300px' },1000); $('#box').animate({ 'width':'300px' },1000); $('#box').animate({ 'height':'300px' },1000);}); $('.stop').click(function(){ $('#box').stop(true,false); }); |
//注意：第一個參數表示是否取消列隊動畫，默認為 false。如果參數為 true，當有列隊動 畫的時候，會取消后面的列隊動畫。第二參數表示是否到達當前動畫結尾，默認為 false。 如果參數為 true，則停止后立即到達末尾處?？梢宰孕袕椭企w驗。
有時在執行動畫或列隊動畫時，需要在運動之前有延遲執行，jQuery 為此提供了.delay() 方法。這個方法可以在動畫之前設置延遲，也可以在列隊動畫中間加上。
|
1
2
3
4
5
6
7
8
9
10
11
|
//開始延遲 1 秒鐘，中間延遲 1 秒 $('.animate').click(function(){ $('#box').delay(1000).animate({ 'left':'300px' },1000); $('#box').animate({ 'bottom':'300px' },1000); $('#box').delay(1000).animate({ 'width':'300px' },1000); $('#box').animate({ 'height':'300px' },1000); }); |
arguments.callee 在哪一個函數中運行，它就代表哪一個函數。 一般用在匿名函數中。在匿名函數中有時會需要自己調用自己，但是由于是匿名函數，沒有名字，無名可調。這時就可以用arguments.callee來代替匿名的函數
|
1
2
3
4
|
//遞歸執行自我，無限循環執行$('#box').slideToggle('slow',function(){ $(this).slideToggle('slow',arguments.callee); }); |
$.fx.off屬性可以關閉所有動畫效果。
$.fx.off=true; //默認為 false
均理解完畢。
以上所述是小編給大家介紹的 jQuery 動畫效果代碼分享，希望對大家有所幫助。
原文鏈接：http://blog.csdn.net/unamattin/article/details/53140587
