setTimeout не полностью работает - PullRequest
Новая
       1

setTimeout не полностью работает

1 голос
/ 06 декабря 2011

В следующем коде анимация 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>

Ответы [ 2 ]

1 голос
/ 06 января 2012

У меня была такая же проблема с вызовом функции в setTimeout () не работает. Я решил проблему, заключив вызов функции в кавычки.

Например: 

 $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
    setTimeout("moveit()", 2000);
  });
1 голос
/ 06 декабря 2011

Думаю, проблема в том, что вы использовали .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);
}
...