大致介紹

通過(guò)jQuery中基本的動(dòng)畫(huà)方法，能夠輕松地為網(wǎng)頁(yè)添加非常精彩的視覺(jué)效果，給用戶一種全新的體驗(yàn)

jQuery中的動(dòng)畫(huà)

show()和hide()方法

1、show()方法和hide()方法是jQuery中最基本的方法，hide()方法會(huì)將一個(gè)元素的display設(shè)置為"none"；

2、show()方法和hide()方法會(huì)同時(shí)改變?cè)氐膶挾取⒏叨群屯该鞫?/p>

3、在一個(gè)元素使用hide()方法時(shí)會(huì)記錄原先的display屬性，當(dāng)調(diào)用show()方法的時(shí)候會(huì)根據(jù)hide()方法記住的display屬性值來(lái)顯示該元素

4、show()方法和hide()方法都能接受一個(gè)參數(shù)，表示運(yùn)動(dòng)的快慢

$('.div1').toggle(function(){
$('.div2').hide(600);
 },function(){
  $('.div2').show(600);
 });

fadeIn()方法和fadeOut()方法

1、fadeOut()方法在指定的一段時(shí)間內(nèi)只降低元素的不透明度，而fadeIn()方法則相反

2、接受一個(gè)參數(shù)

 $('.div1').toggle(function(){
  $('.div2').fadeIn(600);
 },function(){
  $('.div2').fadeOut(600);
 });

slideUp()方法和slideDown()方法

　1、slideUp()方法和slideDown()方法只會(huì)改變?cè)氐母叨?。如果一個(gè)元素的display屬性值為"none"，當(dāng)調(diào)用slideDown()方法時(shí)，這個(gè)元素將由上至下延伸，slideUp()方法相反

　2、接受一個(gè)參數(shù)

 $('.div1').toggle(function(){
  $(this).next().slideUp();
 },function(){
  $(this).next().slideDown();
 });

自定義動(dòng)畫(huà)方法animate()

　語(yǔ)法：animate(params,speed,callback);

　(1)params:一個(gè)包含樣式屬性及值得映射

　(2)speed:速度參數(shù)，可選

　(3)callback:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，可選

1、基本用法

 $('.div1').click(function(){
  $('.div2').animate({width:'+=50px',height:'300px'},600);
 });

2、多重動(dòng)畫(huà)

如果要采用鏈?zhǔn)竭\(yùn)動(dòng)可以采用鏈?zhǔn)綄?xiě)法

 $('.div1').click(function(){
 $('.div2').animate({width:'350px'},600)
  .animate({height:'300px'},600);
 });

注意：如果采用鏈?zhǔn)綄?xiě)法時(shí)用了css()方法，css()方法不會(huì)添加到運(yùn)動(dòng)隊(duì)列中，會(huì)直接執(zhí)行而不等待前面的動(dòng)畫(huà)

 $('.div1').click(function(){
  $('.div2').animate({width:'350px'},600)
   .animate({height:'300px'},600)
   .css('border','10px solid black');
 });

這個(gè)元素的邊框會(huì)在一開(kāi)始就添加到了元素上，要解決這個(gè)問(wèn)題的辦法就是使用回調(diào)函數(shù)

如果要同時(shí)運(yùn)動(dòng)可將要運(yùn)動(dòng)的值寫(xiě)在一起

 $('.div1').click(function(){
 $('.div2').animate({width:'350px',height:'300px'},600);
 });

回調(diào)函數(shù)

回調(diào)函數(shù)適用與jQuery所有的動(dòng)畫(huà)效果方法

例如要解決鏈?zhǔn)綄?xiě)法css()屬性會(huì)直接執(zhí)行的問(wèn)題可以采用回調(diào)函數(shù)的方法

 $('.div1').click(function(){
 $('.div2').animate({width:'350px'},600)
   .animate({height:'300px'},600,function(){
   $('.div2').css('border','10px solid black');
  });
 });

停止動(dòng)畫(huà)和判斷是否處于動(dòng)畫(huà)狀態(tài)

1、停止元素的動(dòng)畫(huà)

stop()方法接受兩個(gè)參數(shù)

第一個(gè)參數(shù)為true或者false，表示是否要清空為執(zhí)行完的動(dòng)畫(huà)隊(duì)列，例如我們寫(xiě)鏈?zhǔn)絼?dòng)畫(huà)時(shí)，如果第一個(gè)參數(shù)為true，當(dāng)我們阻止了正在進(jìn)行的一個(gè)動(dòng)畫(huà)操作后，后面的動(dòng)畫(huà)操作都會(huì)被清空，如果參數(shù)為false時(shí)，就只會(huì)阻止當(dāng)前的這個(gè)動(dòng)畫(huà)，動(dòng)畫(huà)隊(duì)列后的動(dòng)畫(huà)依舊執(zhí)行

第二個(gè)參數(shù)為true或者false，表示是否要將正在執(zhí)行的動(dòng)畫(huà)跳轉(zhuǎn)到末狀態(tài)

2、判斷元素是否處于動(dòng)畫(huà)狀態(tài)

如果用戶頻繁的執(zhí)行一個(gè)animate()動(dòng)畫(huà)時(shí)，就會(huì)出現(xiàn)動(dòng)畫(huà)積累，解決方法就是判斷元素是否正處于動(dòng)畫(huà)狀態(tài)，如果元素不處于動(dòng)畫(huà)狀態(tài)，才為元素添加新的動(dòng)畫(huà)

if(!$('div1').is(':animated')){
 // 添加動(dòng)畫(huà)
 }

3、延遲動(dòng)畫(huà)

如果要延遲執(zhí)行一個(gè)動(dòng)畫(huà)，就可以使用delay()方法

 $('.div1').click(function(){
  $('.div2').animate({width:'350px'},600)
   .delay(1000)
   .animate({height:'300px'},600,function(){
    $('.div2').css('border','10px solid black');
   });
 });

其他動(dòng)畫(huà)方法

1、slideToggle()方法

通過(guò)高度的變化來(lái)切換匹配的元素的可見(jiàn)性

$('.div1').click(function(){
 $('.div2').slideToggle();
});

2、fadeTo()方法

可以把元素的不透明度以漸進(jìn)的方式調(diào)整到指定的值，這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度

 $('.div1').click(function(){
 $('.div2').fadeTo(600,0.5);
 });

3、fadeToggle()方法

通過(guò)不透明度來(lái)切換匹配元素的可見(jiàn)性

 $('.div1').click(function(){
 $('.div2').fadeTo(600,0.5);
 });

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論