jQuery动画无法正常工作

Question

我的jQuery动画并非可靠地发生，所有的时机似乎都关闭了。它会快速上下移动，然后有时只能中途移动。 setimeout方法似乎比延迟更好，但仍然不能很好地工作。

这就是我目前已经成功地将div上下移动，并且取决于我在页面上做的事情似乎影响了它的可靠程度。当我在做的​​很多它都疯了，但有时其他时候它是好的

<script type="text/javascript"> 

$(document).ready(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script> 

我已删除了与scroloTop 0线，但它会随机滚动到顶部。我不使用其他scroilltop

Answer 1

的问题基本上是不同的事情可能与这种类型的代码发生，这取决于你穿什么的.load（）回调的任何地方之间的延迟事件。

DOMContentLoaded（“就绪”）事件发生在“加载”事件之前，但问题在于，通常您不知道两个事件之间的延迟。

通过执行代码，如：

$(document).ready(function() { 
    setTimeout(function() { 
    // Do some stuff 
    // ... 
    }, 2000); 

你不知道的setTimeout的回调将之前或“load”事件后执行。如果DOMContentLoaded事件和加载事件之间的延迟小于2秒，setTimeout回调将在加载事件之后执行（并且在回调之后执行），以便简化（因为setTimeout延迟永远不会是事件） “​​”）。否则，他们将被执行。

解决方案是确保无论“加载”和“就绪”事件之间的延迟如何，您的代码都能够应对这种情况。

您可以考虑：

1. “（）.load”回调移动不亚于您可以将代码在你进入“就绪（）”的回调。如果可能，您应该更喜欢“准备好”事件。
2. 如果某些代码确实依赖于“加载”事件，则应该将此代码（以及依赖它的代码，可能包含您的问题的片段）放入“.load（）”中。

您现在应该测试，因为它的快速做到这一点，使用：

<script type="text/javascript"> 

$(window).load(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script> 

然而，即使它似乎工作，你真的应该考虑的选项“1”。

请记住，就绪事件不太可能受到缓慢（或崩溃）服务器上的外部资源的影响，然而在这种情况下窗口“负载”事件可能发生得非常晚。或者从不发生。因此，如果可能的话，“准备好”事件应该是首选。

希望这有助于

Answer 2

DEMO

<script type="text/javascript"> 

$(document).ready(function() { 
    $("html, body").animate({scrollTop: '50px'},2000,function(){ 
      $(this).animate({scrollTop: '0px'}, 3000); 
    }); 

}); 

</script>