滚动Java动画

Question

我试图在页面上的元素上做简单的动画

$(window).on('scroll',function () {
    if($(window).scrollTop() > 500){
        $('#top-page').animate({ right: '50px' }, "slow");
    }else{
         $('#top-page').animate({ right: '-50px' }, "slow");
          }

});

问题在于它永远不会进入其他条件。

Answer 1

在scroll过程中， scroll事件会触发多次，因此每次触发时都会向动画队列中添加新的动画。 队列增长到了巨大的规模，您迫不及待地想播放“正确的”动画。

为避免这种情况，可以使用.stop()方法刷新队列：

 $(window).on('scroll', function() { var sign = $(window).scrollTop() > 50 ? '' : '-'; $('#top-page').stop().animate({right: sign + '50px'}, "slow"); }); 

 body { height: 300vh } #top-page { position: fixed; top: 0; right: -50px; background: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="top-page">TOP PAGE</div> 

Answer 2

$(window).on('scroll',function () {
    //var body = document.body; // For Safari
    var html = document.documentElement; // Chrome, Firefox, IE and Opera

    if(html.scrollTop > 500){
        $('#top-page').animate({ right: '50px' }, "slow");
    }else{
         $('#top-page').animate({ right: '-50px' }, "slow");
    }
});