Question

为什么我的代码会出现如此可怕的延迟。我希望这个div可以根据窗口尺寸滑入并滑出。但每次都有延迟。它的长度从来都不一样。我应该使用超时功能吗？或者我的代码有问题吗？

<!DOCTYPE html>
<html>
<head><style type="text/css">div {
  background-color: brown;
  width: 100px;
  height: 100px;
  position: relative;
  display: none;
  left: -120px;
}
</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>

  <div style="display: block; left: 0px;" id="navg">Chocolate!</div>


<script>var navg = $("#navg");
var wind = $(window);

wind.load(function() {
  if (wind.width() > 900) {
    navg.show();
    navg.animate({
      left: "0px"
      }, 1000);
  } 
});

wind.resize(function() {
  if ((wind.width() < 900) && (navg.is(":visible"))) {
    navg.animate({"left":"-120px"}, 1000, function() {
      $(this).hide();
    });
  } else if ((wind.width() >= 900) && (navg.is(":hidden"))) {
    navg.show(function() {
      navg.animate({"left":"0px"}, 1000); 
    });
  }
});
</script></body>

以下是Liveweave中代码的链接：http://liveweave.com/HWpQUe 尝试调整大小以更好地了解我的意思。

Answer 1

正在发生的事情是，您有多个动画在彼此之间运行，并且相互阻止结束。你可能想在开始每个动画之前使用api.jquery.com/finish来停止任何以前的动画。

Jquery调整延迟时间

1 个答案: