jQuery 動畫效果代碼分享

一．顯示、隱藏

 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 動畫效果代碼分享，希望對大家有所協助。