animate導航欄

Question

下面的腳本可以調整爲動畫導航的高度，目前它暫停然後從一個大小跳轉到另一個，我知道jQuery中的動畫功能，但只是想知道如何以及在哪裏實現它在這裏。此外，該腳本正在計算導航的高度爲寬度的四分之一。

$(function() { 
var pause = 200; // will only process code within delay(function() { ... }) every 100ms. 

$(window).resize(function() { 

    delay(function() { 


     var width = $(window).width(); 

     if(width >= 600) { 
      // code for tablet view 


       var cw = $('nav a').width()/4; // calculation here 
       $('nav, nav ul, nav a').css({'height':cw+'px'}) // target 
       $('nav, nav ul, nav a').css({'line-height':cw+'px'}) // target 


     } else if(width <= 600) { 
      // code for mobile portrait 

       var cw = $('nav a').width()/4; // calculation here 
       $('nav, nav ul, nav a').css({'height':cw+'px'}) // target 
       $('nav, nav ul, nav a').css({'line-height':cw+'px'}) //  target 
     } 

    }, pause); 

}); 

$(window).resize(); 

}); 

Answer 1

嘗試改變.css到.animate。 jQuery的動畫函數可以在不同的css值之間平滑地進行動畫處理，例如邊距和高度。其他參數可以用來改變動畫的持續時間。完整文檔可以發現here.

並非所有屬性可以使用jQuery的.animate命令是動畫，所以有時它可能需要一些工作，弄清楚如何風格你的文檔的方式，使得可以製作動畫如何想。