Question

在以下代码中，我的div函数中的moveit()动画正在等待setTimeout()函数中的.click，但是p.font-size动画点击后会立即发生moveit()。它不是在等待超时。我确定这是一个基本问题，但这就是我现在所处的水平。

感谢您的任何建议，

<script type="text/javascript">
$(document).ready(function(){
  $("#no").click(function() {
    $("#sleep").animate({"border-width": "10px"}, "fast");
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
    setTimeout(moveit, 2000);
  });
  $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
    setTimeout(moveit, 2000);
  });           
});
</script>
<script type="text/javascript">
  function moveit() {
    $("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
    $("p.sleepquestion").animate({"font-size": "16px"}, "slow");
    $("#sleepanswer").animate({ "left": "-9999px"}, "fast");
  }
</script>

Answer 1

我认为问题可能是您使用.replaceWith()。尝试用另一个元素替换元素，但是您尝试用文本替换元素。我想你只想用.html()代替。

此外，您无需使用setTimeout() - 您可以使用.delay()代替p:.sleepquestion。而且，我认为您的选择器<script type="text/javascript"> $(document).ready(function(){ $("#no").click(function() { $("#sleep").animate({"border-width": "10px"}, "fast"); $("#sleepanswer").animate({ opacity: 0 }, "fast"); $("p.sleepquestion").html("That is too bad. Tonight you will sleep better."); moveit(); }); $("#yes").click(function() { $("#sleepanswer").animate({ opacity: 0 }, "fast"); $("p.sleepquestion").html("That is great! A good night sleep is important."); moveit(); }); }); </script> <script type="text/javascript"> function moveit() { $("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow"); $("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow"); $("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast"); } </script>可能不对。你可以这样做：

.replaceWith()

我还将.html()更改为p:.sleepquestion并将p.sleepquestion更改为function moveit() { setTimeout(function() { $("#sleep").animate({"left": "10px", "width": "150px"}, "slow"); $("p.sleepquestion").animate({"font-size": "16px"}, "slow"); $("#sleepanswer").animate({ "left": "-9999px"}, "fast"); }, 2000); }。

您的函数moveit也可以通过将超时置于函数内来编写：

{{1}}

Answer 2

我在setTimeout（）函数调用时遇到了同样的问题。我通过在引号中包含函数调用来解决问题。

例如：

 $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
    setTimeout("moveit()", 2000);
  });

setTimeout不能完全正常工作

2 个答案: