一．顯示、隱藏

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

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

在.show()和.hide()方法可以傳遞一個(gè)參數(shù)，這個(gè)參數(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è)字符串，如果不小心傳遞錯(cuò)誤或者傳遞空字符串。 那么它將采用默認(rèn)值：400 毫秒。

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

（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()的時(shí)候，如果需要一個(gè)按鈕切換操作，需要進(jìn)行一些條件判 斷。而 jQuery 提供給我們一個(gè)類似功能的獨(dú)立方法：.toggle()。

$('.toggle').click(function(){
  $(this).toggle('slow'); 
});

二．滑動(dòng)、卷動(dòng) jQuery 提供了一組改變元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顧名 思義，向上收縮(卷動(dòng))和向下展開(滑動(dòng))。

$('.down').click(function(){  //向下滑動(dòng)
  $('#box').slideDown(); 
});
$('.up').click(function(){   //向上滑動(dòng)
   $('#box').slideUp(); 
});
$('.toggle').click(function(){  //切換
  $('#box').slideToggle(); 
});

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

三．淡入、淡出

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

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

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

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

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

四．自定義動(dòng)畫

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

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

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

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

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

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

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

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

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

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

五．列隊(duì)動(dòng)畫方法

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

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

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

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

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

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

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

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

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

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

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

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

很多時(shí)候需要停止正在運(yùn)行中的動(dòng)畫，jQuery 為此提供了一個(gè).stop()方法。它有兩個(gè)可 選參數(shù)：.stop(clearQueue,gotoEnd)；clearQueue 傳遞一個(gè)布爾值，代表是否清空未執(zhí)行完的 動(dòng)畫列隊(duì)，gotoEnd 代表是否直接將正在執(zhí)行的動(dòng)畫跳轉(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); 
  });

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

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

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

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

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

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

均理解完畢。

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

最新評論