setTimeout 不完全起作用

发布于 2024-12-19 14:25:24 字数 1129 浏览 1 评论 0原文

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

感谢您的任何建议，

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

原文

In the following code, the div animating in my moveit() function is waiting for the setTimeout() in the .click functions, but the p.font-size animation in moveit() is happening immediately upon the click. It's not waiting for the timeout. I'm sure it's a basic issue, but that's the level I'm at right now.

Thanks for any suggestions,

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尾戒 2024-12-26 14:25:24

我认为问题可能是您对 .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。

您的函数 moveit 也可以这样编写，将超时放入函数内：

function moveit() {
    setTimeout(function() {
        $("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
        $("p.sleepquestion").animate({"font-size": "16px"}, "slow");
        $("#sleepanswer").animate({ "left": "-9999px"}, "fast");
    }, 2000);
}

I think the problem may have been your use of .replaceWith(). That attempts to replace an element with another, but you've tried to replace an element with text. I think you just want to use .html() instead.

Also, you don't need to use the setTimeout() - you can use .delay() instead. And, I think your selectors p:.sleepquestion are probably not right. You can go with this:

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

I also changed .replaceWith() to .html() and changed p:.sleepquestion to p.sleepquestion.

Your function moveit could also be written like this by putting the timeout inside the function:

function moveit() {
    setTimeout(function() {
        $("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
        $("p.sleepquestion").animate({"font-size": "16px"}, "slow");
        $("#sleepanswer").animate({ "left": "-9999px"}, "fast");
    }, 2000);
}

回复收藏 0 原文

薄暮涼年 2024-12-26 14:25:24

我遇到了同样的问题，setTimeout() 中的函数调用不起作用。我通过将函数调用放在引号中解决了这个问题。

例如：

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

I had the same issue with a function call in setTimeout() not working . I solved the issue by surrounding the function call in quotes.

For example:

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

回复收藏 0 原文

~没有更多了~