javascript - 动画导航栏

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 的 animate 函数可以在不同的 css 值之间平滑动画，例如边距和高度。可以为更改动画持续时间等事情提供其他参数。完整的文档可以在这里找到。

并非所有属性都可以使用 jQuery.animate命令进行动画处理，因此有时可能需要一些工作才能确定如何以一种可以按照您想要的方式对其进行动画处理的方式来设置文档样式。