大致介紹

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

jQuery中的動畫

show()和hide()方法

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

2、show()方法和hide()方法會同時(shí)改變元素的寬度、高度和透明度

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

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

$('.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()方法只會改變元素的高度。如果一個(gè)元素的display屬性值為"none"，當(dāng)調(diào)用slideDown()方法時(shí)，這個(gè)元素將由上至下延伸，slideUp()方法相反

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

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

自定義動畫方法animate()

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

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

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

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

1、基本用法

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

2、多重動畫

如果要采用鏈?zhǔn)竭\(yùn)動可以采用鏈?zhǔn)綄懛?/p>

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

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

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

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

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

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

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

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

例如要解決鏈?zhǔn)綄懛╟ss()屬性會直接執(zhí)行的問題可以采用回調(diào)函數(shù)的方法

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

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

1、停止元素的動畫

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

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

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

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

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

if(!$('div1').is(':animated')){
 // 添加動畫
 }

3、延遲動畫

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

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

其他動畫方法

1、slideToggle()方法

通過高度的變化來切換匹配的元素的可見性

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

2、fadeTo()方法

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

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

3、fadeToggle()方法

通過不透明度來切換匹配元素的可見性

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

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

最新評論