DIV CSS 佈局教程網

大致介紹

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

jQuery中的動畫

show()和hide()方法

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

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

3、在一個元素使用hide()方法時會記錄原先的display屬性，當調用show()方法的時候會根據hide()方法記住的display屬性值來顯示該元素

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

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

fadeIn()方法和fadeOut()方法

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

2、接受一個參數

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

slideUp()方法和slideDown()方法

　1、slideUp()方法和slideDown()方法只會改變元素的高度。如果一個元素的display屬性值為"none"，當調用slideDown()方法時，這個元素將由上至下延伸，slideUp()方法相反

　2、接受一個參數

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

自定義動畫方法animate()

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

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

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

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

1、基本用法

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

2、多重動畫

如果要采用鏈式運動可以采用鏈式寫法

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

注意：如果采用鏈式寫法時用了css()方法，css()方法不會添加到運動隊列中，會直接執行而不等待前面的動畫

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

這個元素的邊框會在一開始就添加到了元素上，要解決這個問題的辦法就是使用回調函數

如果要同時運動可將要運動的值寫在一起

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

回調函數

回調函數適用與jQuery所有的動畫效果方法

例如要解決鏈式寫法css()屬性會直接執行的問題可以采用回調函數的方法

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

停止動畫和判斷是否處於動畫狀態

1、停止元素的動畫

stop()方法接受兩個參數

第一個參數為true或者false，表示是否要清空為執行完的動畫隊列，例如我們寫鏈式動畫時，如果第一個參數為true，當我們阻止了正在進行的一個動畫操作後，後面的動畫操作都會被清空，如果參數為false時，就只會阻止當前的這個動畫，動畫隊列後的動畫依舊執行

第二個參數為true或者false，表示是否要將正在執行的動畫跳轉到末狀態

2、判斷元素是否處於動畫狀態

如果用戶頻繁的執行一個animate()動畫時，就會出現動畫積累，解決方法就是判斷元素是否正處於動畫狀態，如果元素不處於動畫狀態，才為元素添加新的動畫

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

3、延遲動畫

如果要延遲執行一個動畫，就可以使用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()方法

可以把元素的不透明度以漸進的方式調整到指定的值，這個動畫只調整元素的不透明度

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

3、fadeToggle()方法

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

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！