Question

我已经编写了一些JavaScript来调整菜单栏的大小，但是代码没有返回正确的值。当向下滚动时，它会在元素的height:147px; min-height:70px;属性中添加style。但是，我希望高度也是70px。

为了进行测试，我尝试在Chrome调试器中更改它。但是，每次我改变它，它会直接改变回来。这是代码：

$(window).on('scroll', function () {
    if ($(window).width() > 900) {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 45) {
            $('#wpadminbar').fadeOut();
            $( ".bottom_bar" ).addClass( "stickymenu" );
            $('.bottom_bar').stop().animate({height: "70px"},300);
            $('.bottom_bar').stop().animate({minHeight: "70px"},300);
            $('.bottom_bar.menuwrapper').stop().animate({lineHeight: "70px"},300);
            $('.bottom_bar.menuwrapper').stop().animate({height: "70px"},300);
        }
        else {
            $('#wpadminbar').fadeIn();
            $( ".bottom_bar" ).removeClass( "stickymenu" );
            $('.bottom_bar').stop().animate({height: "147px"},300);
            $('.bottom_bar').stop().animate({minHeight: "147px"},300);
            $('.bottom_bar.menuwrapper').stop().animate({lineHeight: "147px"},300);
            $('.bottom_bar.menuwrapper').stop().animate({height: "147px"},300);
        }
    }
});

Answer 1

编写此代码的方式，顶行中的动画将立即停止，因为第二行将同时运行（而不是在300ms动画之后），并停止任何正在进行的动画。

$('.bottom_bar').stop().animate({height: "70px"},300);
$('.bottom_bar').stop().animate({minHeight: "70px"},300);

将两行合并为一行以解决此问题，如下所示：

$('.bottom_bar').stop().animate({height: "70px", minHeight: "70px"},300);

对您示例中的所有对执行此操作，并查看是否可以解决问题。

jQuery动画没有正确调整

1 个答案: