Question

我使用jQuery制作了一个菜单动画。它可以显示HERE。向下滚动时，它会播放，但看起来菜单会消失一秒钟，动画会变坏。这是为什么？

如何修复？

HTML标记：

<div class="row" id="header-row">
    <a href="#">
        <img class="logo col-md-3 col-xs-6 col-sm-6 img-responsive src="images/logo-svg.svg"/>
    </a>                                                                                                                                                                                                                                
    <ul class="nav col-md-7 col-md-offset-2">
        <?php wp_nav_menu(array('menu' => 'main')); ?>
    </ul>   
</div>

jQuery的：

$(function(){
  $(window).scroll(function(){
    var aTop = $('#wrapper').height();
    if($(this).scrollTop()>aTop){
        $('.wrapper').stop().animate({
            height : '85px'
        });

        $('.logo').stop().animate({
            width : '180px',
            marginTop : '10px'
        },{
        duration: 400,
        specialEasing: {
            width: 'linear'
        }});     

        $('.logo').animate({
            marginRight : '55px'
        },1);

        $('.nav li').stop().css({
               marginTop : '60px'
            });

        scrolledOnTop = false;
    }
  });
});

$(function(){
  $(window).scroll(function(){
    var aTop = $('#wrapper').height();
    if($(this).scrollTop() <= aTop){
        $('.wrapper').stop().animate({
            height : '142px'
        },{
        duration: 400,
        specialEasing: {
            height: 'linear'
        }
    });

        $('.nav li').stop().css({
            marginTop : '90px'
        });



        $('.logo').stop().animate({
            width : '222px',
            marginTop : '24px',
            marginRight : '5px'
        },{
        duration: 400,
        specialEasing: {
            width: 'linear'
        }  
    });

        scrolledOnTop = true;
    }
  });
});

Answer 1

把

$('.nav li').stop().css({
    marginTop : '90px'
});

在此之前

$('.wrapper').stop().animate({
        height : '142px'
    },{
    duration: 400,
    specialEasing: {
        height: 'linear'
    }
});

这应该会阻止它消失

jQuery动画使元素消失

1 个答案: