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值之间平滑地动画，例如margin和height。可以为诸如改变动画的持续时间之类的事情提供其他参数。可以找到完整的文档here.

并非所有属性都可以使用jQuery .animate命令进行动画处理，因此有时可能需要做一些工作来弄清楚如何设置文档的样式，以便能够按照您想要的方式为其设置动画。 / p>

动画导航栏

1 个答案: