一．顯示、隱藏

 jQuery 中顯示方法為：.show()，隱藏方法為：.hide()。在無參數(shù)的時候，只是硬性的顯示內(nèi)容和隱藏內(nèi)容。

$('.show').click(function(){ //設(shè)置個觸發(fā)事件  
  $('#box').show();     //顯示 
});
$('.hide').click(function(){  //設(shè)置個觸發(fā)事件  
  $('#box').hide();     //隱藏
});

在.show()和.hide()方法可以傳遞一個參數(shù)，這個參數(shù)以毫秒(1000 毫秒等于 1 秒鐘)來控 制速度。并且里面富含了勻速變大變小，以及透明度變換。

$('.show').click(function(){ 
  $('#box').show(1000);    //顯示用了 1 秒 
}); $('.hide').click(function(){ 
  $('#box').hide(1000);    //隱藏用了 1 秒 
});

除了直接使用毫秒來控制速度外，jQuery 還提供了三種預(yù)設(shè)速度參數(shù)字符串：slow、 normal 和 fast，分別對應(yīng) 600 毫秒、400 毫秒和 200 毫秒。

$('#box').show('slow');   //600 毫秒 
$('#box').show('normal');  //400 毫秒 
$('#box').show('fast');   //200 毫秒 

注意：不管是傳遞毫秒數(shù)還是傳遞預(yù)設(shè)字符串，如果不小心傳遞錯誤或者傳遞空字符串。 那么它將采用默認(rèn)值：400 毫秒。

使用.show()和.hide()的回調(diào)函數(shù)，可以實現(xiàn)列隊動畫效果。

（1）使用函數(shù)名調(diào)用自身

$('.show').click(function(){
  $('#box').show('slow',function showspan(){
    $(this).next().show('slow',showspan);
  });
})

（2）使用 arguments.callee 匿名函數(shù)自調(diào)用

$('.show').click(function(){
  $('#box').show('slow',function(){
    $(this).next().show('slow',arguments.callee);
  });
})

我們在使用.show()和.hide()的時候，如果需要一個按鈕切換操作，需要進(jìn)行一些條件判 斷。而 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(); 
});

注意：滑動、卷動效果和顯示、隱藏效果一樣，具有相同的參數(shù)。

三．淡入、淡出

jQuery 提供了一組專門用于透明度變化的方法：.fadeIn()和.fadeOut()，分別表示淡入、 淡出，當(dāng)然還有一個自動切換的方法：.fadeToggle()。

$('.in').click(function(){    //淡入
  $('#box').fadeIn('slow');  
});
$('.out').click(function(){    //淡出
  $('#box').fadeOut('slow'); 
});
$('.toggle').click(function(){  //切換
  $('#box').fadeToggle(); 
});

上面三個透明度方法只能是從 0 到 100，或者從 100 到 0，如果我們想設(shè)置指定值就沒 有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()方法。

$('.toggle').click(function(){ 
  $('#box').fadeTo('slow',0.33);   //0.33 表示值為 33%
});

ps：值數(shù)為0到1，對應(yīng)百分比

四．自定義動畫

jQuery 提供了幾種簡單常用的固定動畫方面我們使用。但有些時候，這些簡單動畫無法 滿足我們更加復(fù)雜的需求。這個時候，jQuery 提供了一個.animate()方法來創(chuàng)建我們的自定
義動畫，滿足更多復(fù)雜多變的要求。

$('.animate').click(function(){ 
  $('#box').animate({ 
    'width':'300px', 
    'fontSize':'50px', 
    'opacity':0.5 
  }); 
});

注意：一個 CSS 變化就是一個動畫效果，上面的例子中，已經(jīng)有四個 CSS 變化，已經(jīng) 實現(xiàn)了多重動畫同步運動的效果。

必傳的參數(shù)只有一個，就是一個鍵值對 CSS 變化樣式的對象。還有兩個可選參數(shù)分別 為速度和回調(diào)函數(shù)。

$('.animate').click(function(){
  $('#box').animate({
    'width':'500px',
    'height':'400px',
  },2000,function(){
    alert('執(zhí)行完畢')；
  })；
})；

到目前位置，我們都是創(chuàng)建的固定位置不動的動畫。如果想要實現(xiàn)運動狀態(tài)的位移動畫， 那就必須使用自定義動畫，并且結(jié)合 CSS 的絕對定位功能。

$('.animate').click(function(){ 
  $('#box').animate({ 
    'top':'300px',   //先必須設(shè)置 CSS 絕對定位 
    'left':'200px' 
  }); 
});

ps：必須先在css里設(shè)置參照物，絕對定位

自定義動畫中，每次開始運動都必須是初始位置或初始狀態(tài)，而有時我們想通過當(dāng)前位 置或狀態(tài)下再進(jìn)行動畫。jQuery 提供了自定義動畫的累加、累減功能。

$('.animate').click(function(){ 
    $('#box').animate({ 
      left:'+=100px',
      width:'+=100px',
      height:'+=100px'
  }); 
});

五．列隊動畫方法

之前我們已經(jīng)可以實現(xiàn)列隊動畫了，如果是同一個元素，可以依次順序或連綴調(diào)用。如 果是不同元素，可以使用回調(diào)函數(shù)。但有時列隊動畫太多，回調(diào)函數(shù)的可讀性大大降低。為 此，jQuery 提供了一組專門用于列隊動畫的方法。

//連綴無法實現(xiàn)按順序列隊
$('#box').slideUp('slow').slideDown('slow').css('background','orange');

注意：如果動畫方法，連綴可以實依次列隊，而.css()方法不是動畫方法，會在一開始傳入列隊之前。那么，可以采用動畫方法的回調(diào)函數(shù)來解決。

//使用回調(diào)函數(shù)，強(qiáng)行將.css()方法排隊到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow',function({
  $(this).css('background','orange');              
});

但如果這樣的話，當(dāng)列隊動畫繁多的時候，可讀性不但下降，而原本的動畫方法不夠清 晰。所以，我們的想法是每個操作都是自己獨立的方法。那么 jQuery 提供了一個類似于回 調(diào)函數(shù)的方法：.queue()。

//使用.queue()方法模擬動畫方法跟隨動畫方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function(){
  $(this).css('background','orange');
 });

現(xiàn)在，我們想繼續(xù)在.queue()方法后面再增加一個隱藏動畫，這時發(fā)現(xiàn)居然無法實現(xiàn)。 這是.queue()特性導(dǎo)致的。解決方法：jQuery的.queue()的回調(diào)函數(shù)可以 傳遞一個參數(shù)，這個參數(shù)是 next 函數(shù)，在結(jié)尾處調(diào)用這個 next()方法即可再連綴執(zhí)行列隊動畫。

//使用 next 參數(shù)來實現(xiàn)繼續(xù)調(diào)用列隊動畫 $('#box').slideUp('slow').slideDown('slow').queue(function(next{
  $(this).css('background','orange'); 
  next(); 
}).hide('slow');

ps：.queue()方法還有一個功能，就是可以得到當(dāng)前動畫個列隊的長度（具體不做演示）

jQuery 還提供了一個清理列隊的功能方法：.clearQueue()。把它放入一個列隊的回調(diào)函 數(shù)或.queue()方法里，就可以把剩下為執(zhí)行的列隊給移除。

//清理動畫列隊 
$('#box').slideDown('slow',function(){
  $(this).clearQueue()
});

六．動畫相關(guān)方法

很多時候需要停止正在運行中的動畫，jQuery 為此提供了一個.stop()方法。它有兩個可 選參數(shù)：.stop(clearQueue,gotoEnd)；clearQueue 傳遞一個布爾值，代表是否清空未執(zhí)行完的 動畫列隊，gotoEnd 代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)。

$('.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); 
  });

//注意：第一個參數(shù)表示是否取消列隊動畫，默認(rèn)為 false。如果參數(shù)為 true，當(dāng)有列隊動 畫的時候，會取消后面的列隊動畫。第二參數(shù)表示是否到達(dá)當(dāng)前動畫結(jié)尾，默認(rèn)為 false。 如果參數(shù)為 true，則停止后立即到達(dá)末尾處?？梢宰孕袕?fù)制體驗。

有時在執(zhí)行動畫或列隊動畫時，需要在運動之前有延遲執(zhí)行，jQuery 為此提供了.delay() 方法。這個方法可以在動畫之前設(shè)置延遲，也可以在列隊動畫中間加上。

//開始延遲 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 在哪一個函數(shù)中運行，它就代表哪一個函數(shù)。 一般用在匿名函數(shù)中。在匿名函數(shù)中有時會需要自己調(diào)用自己，但是由于是匿名函數(shù)，沒有名字，無名可調(diào)。這時就可以用arguments.callee來代替匿名的函數(shù)

//遞歸執(zhí)行自我，無限循環(huán)執(zhí)行
$('#box').slideToggle('slow',function(){
  $(this).slideToggle('slow',arguments.callee); 
});

$.fx.off屬性可以關(guān)閉所有動畫效果。

$.fx.off=true; //默認(rèn)為 false

均理解完畢。

以上所述是小編給大家介紹的 jQuery 動畫效果代碼分享，希望對大家有所幫助。

最新評論