jQuery动画无法正常工作

我的jQuery动画没有可靠地发生，所有的时间似乎都停止了。它会快速上下移动，有时只移动一半。setimeout方法似乎比delay更好，但仍然不能很好地工作

这就是我目前所拥有的，它成功地上下移动了div，并且取决于我在页面上所做的事情似乎影响了它的可靠性。当我做很多

.load（）

时，有时会很疯狂，但有时也很好

<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>

$（文档）.ready（函数滚动播放（）{
setTimeout（函数（）{
$（“#songplaybox”）.stop（）.animate({
滚动顶部：50
}, '500');
}, 2000);
setTimeout（函数（）{
$（“#songplaybox”）.stop（）.animate({
滚动顶部：0
}, '500');
}, 5000);
setTimeout（函数（）{
滚动播放（）
}, 8000)
});

我已经删除了scroloTop为0的行，但它将随机滚动到顶部。我没有在其他任何地方使用scroilltop

$（文档）.ready（函数（）{
$（“html，body”）.animate（{scrollTop:'50px'}，2000，function（）{
$（this.animate（{scrollTop:'0px'}，3000）；
});
});

问题基本上在于，这种类型的代码可能会发生不同的情况，这取决于您在.load（）回调中放置的内容以及事件之间的延迟

DOMContentLoaded（“ready”）事件发生在“load”事件之前，但问题是，您通常不知道两个事件之间的延迟

通过执行以下代码：

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

您不知道setTimeout回调是在“load”事件之前还是之后执行

为了简化（因为setTimeout延迟从不精确），如果DOMContentLoaded事件和load事件之间的延迟小于2秒，则setTimeout回调将在load事件之后执行（然后在使用“

.load（）

”注册的回调之后执行）。否则，他们将被执行之前

解决方案是确保无论“load”和“ready”事件之间有多大延迟，您的代码都能够处理这个问题

你可以考虑：

尽可能多地将“.load（）”回调中的代码移动到“.ready（）”回调中。如果可能，您应该更喜欢“就绪”事件

如果某些代码确实依赖于“load”事件，则应将此代码（以及依赖于它的代码，可能包括您的问题片段）放入“.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>

$（窗口）.load（函数滚动播放（）{
setTimeout（函数（）{
$（“#songplaybox”）.stop（）.animate({
滚动顶部：50
}, '500');
}, 2000);
setTimeout（函数（）{
$（“#songplaybox”）.stop（）.animate({
滚动顶部：0
}, '500');
}, 5000);
setTimeout（函数（）{
滚动播放（）
}, 8000)
});

但是，即使看起来可行，你也应该考虑“1”选项。 请记住，就绪事件不太可能受到慢速（或崩溃）服务器上的外部资源的影响，但是在这种情况下，窗口“加载”事件可能发生得很晚。或者永远不会发生。因此，在可能的情况下，最好选择“准备就绪”活动

---

希望这有助于

执行“.load（）”您的意思是使用

$（window）.load（function（）{/*…*/}）？是的，每次我这样做都会引起问题这只做一次，没有延迟，我需要它与延迟循环谢谢你的信息我接受了你的建议，现在大家都很高兴
<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>