Javascript 为导航栏设置动画

下面的脚本可以调整为nav的高度设置动画吗？当前它暂停，然后从一个大小跳到另一个大小。我知道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();

});

$（函数（）{
var pause=200；//每100ms只处理延迟内的代码（函数（）{…}）。
$（窗口）。调整大小（函数（）{
延迟（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度>=600）{
//平板电脑视图代码
var cw=$（'nav a'）.width（）/4；//此处计算
$（'nav，nav ul，nav a'）.css（{'height'：cw+'px'}）//目标
$（'nav，nav ul，nav a'）.css（{'line-height'：cw+'px'}）//目标
}否则，如果（宽度尝试将
.css
更改为
.animate
。jQuery的animate函数可以在不同css值之间平滑地设置动画，例如边距和高度。可以提供其他参数，例如更改动画的持续时间。可以找到完整的文档

并非所有属性都可以使用jQuery
.animate
命令设置动画，因此有时可能需要一些工作来确定如何以您想要的方式设置文档的样式。
请创建一个JSFIDLE。