JavaScript/jQuery动画：循环行为奇怪_Javascript_Jquery_Dom

JavaScript/jQuery动画：循环行为奇怪

javascript jquery dom

JavaScript/jQuery动画：循环行为奇怪,javascript,jquery,dom,Javascript,Jquery,Dom,我是javascript新手…请容忍我。修改了w3c教程中的一些jQuery动画代码。我只是尝试在for循环中动态显示局部count（I）变量，该变量表示为一组（4）jQuery动画调用进行的迭代次数。我希望在每次循环迭代后，SPAN标记中的文本能够从0动态更改为2。然而，当点击按钮时，实际发生的是“count:2”立即显示在span标记中，然后动画发生。此代码执行(http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_anim

我是javascript新手…请容忍我。修改了w3c教程中的一些jQuery动画代码。我只是尝试在for循环中动态显示局部count（I）变量，该变量表示为一组（4）jQuery动画调用进行的迭代次数。我希望在每次循环迭代后，SPAN标记中的文本能够从0动态更改为2。然而，当点击按钮时，实际发生的是“count:2”立即显示在span标记中，然后动画发生。此代码执行(http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation)在以下浏览器中也是如此：Chrome、IE、FireFox和Safari。我做错了什么？我怎样才能让它工作

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
   $(document).ready(function(){
     $("button").click(function(){
      for(i=0; i<3; i++)
      {
        $("div").animate({height:300},"slow"); //jQuery call 1
        $("div").animate({width:300},"slow");  //jQuery call 2
        $("div").animate({height:100},"slow"); //jQuery call 3
        $("div").animate({width:100},"slow");  //jQuery call 4
        document.getElementById("count").innerHTML="count: "+i;  // JavaScript DOM call
      }
   });
 });

</script> 
</head>

<body>
   <button>Start Animation</button>
   <br /><br />
   <div style="background:#98bf21;height:100px;width:100px;position:relative">
      <span id="count"></span> 
   </div>
</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
for（i=0；ianimate
是一个异步调用
它立即返回，动画在背景中发生
整个循环会立即运行。您可以添加一个回调函数，该函数在动画完成时启动。该函数将是动画调用的第四个参数：
.animate（属性[，持续时间][，缓和][，完成]）
对于迟来的回复，我深表歉意，我依赖于此板上的电子邮件机制获取通知，但没有收到任何通知。由于animate调用是异步的，因此问题变成：如何在所有这些animate调用中保持计数器变量的状态（每个for循环迭代中有4个调用）？创建一个接受i
的函数，执行一次迭代，然后在回调中使用i+1
调用自己。不确定如何执行此操作…请提供一个示例？…将代码更改为：'var i=0；$（document）。就绪（function（）{$（“button”）。单击（function（）{myRecursiveFunction（i）；}；}），并包括以下递归函数：'function myRecursiveFunction（i）{$（'div”）.animate（{height:300}，slow”）；$（'div”）.animate（{width:300}，slow”）；$（'div”）.animate（{height:100}，slow”）；animate（{width:100}，slow”）；document.getElementById（“count”）.innerHTML='count:“+i；if（i<10）{myRecursiveFunction（++i）；}}}“…仍然显示为count:10，这几乎是正确的。动画开始后，您将立即再次调用该函数。您需要在animate的完成回调中调用它。
<html>

 <head>

 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">

  var i=0;

  $("div").animate({height:300},"slow",function(){ document.getElementById      ("count").innerHTML="jQuery Animation 1"; });

  $(document).ready(function(){ $("button").click(function(){ myRecursiveFunction(i); }); });

  function myRecursiveFunction(i)
  {
   document.getElementById("count").innerHTML="count: "+i;

   $("div").animate({height:300},"slow");

   $("div").animate({width:300},"slow");

   $("div").animate({height:100},"slow");

   $("div").animate({width:100},"slow",function(){
    if(i < 10){myRecursiveFunction(++i);}
   });

 }

 </script>

 </head>

 <body>

 <button>Start Animation</button>

 <br /><br />

 <div style="background:#98bf21;height:100px;width:100px;position:relative">

   <span id="count"></span>

 </div>

 </body>

</html>

$("div").animate({width:100},"slow","linear", function (){
    document.getElementById("count").innerHTML="count: "+i;
})