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命令是动画，所以有时它可能需要一些工作，弄清楚如何风格你的文档的方式，使得可以制作动画如何想。