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