Question

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

这就是我目前所拥有的，它成功地将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>

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

Answer 1

DEMO

<script type="text/javascript">

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

});

</script>

Answer 2

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

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

执行以下代码：

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

您不知道是否会在“load”事件之前或之后执行setTimeout回调。

为了简化（因为setTimeout延迟永远不会精确），如果DOMContentLoaded事件和load事件之间的延迟小于2秒，则setTimeout回调将在load事件之后执行（然后在回调注册为“ .load()“）。否则，它们将被执行。

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

您可以考虑：

尽可能多地将“.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>

然而，即使它似乎有效，你也应该考虑选项“1”。

请记住，就绪事件不太可能受到慢速（或崩溃）服务器上的外部资源的影响，但是在这种情况下窗口“加载”事件可能会很晚发生。或者永远不会发生因此，在可能的情况下，应该首选“准备好”事件。

希望这有帮助

jQuery动画无法正常工作

2 个答案: