Question

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

__ 上面的原帖...此行下面的新工作代码 的 __ _ __

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

Answer 1

animate是异步调用。

立即返回，动画在后台发生。

你的整个循环立即运行。

Answer 2

您可以添加在动画完成时触发的回调函数，该函数将是动画调用的第四个参数： http://api.jquery.com/animate/ .animate（properties [，duration] [，easing] [，complete]）

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

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

2 个答案: