English 中文(简体)
Javacast / jQuery animation: 行为安排
原标题:JavaScript / jQuery animation: strange for loop behavior

I m javascript newbie...please with me. 修改了从3c 辅导法中选取的 some升法。 我只想生动地展示地方的(一)变量,这代表了为四(4)条 j升的电话而出现的频率。 我期望看到国家空间局的标签文本在每张假日之后从0到2日发生动态变化。 然而,当纽托克被点击时,实际发生的情况是,“面值:2”在tag子里立即显示,然后是 an。 该法典实施(http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation) 在以下浏览器中也是如此: Chrome、IE、PeFox和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>
最佳回答

<代码>animate是一个星号。

它立即返回,并在背景中发生了im。

你们的整整整整条路程都瞬时运行。

问题回答

You can add a callback function that is fired when the animation completes the function would be the fourth argument to the animate call: http://api.jquery.com/animate/ .animate( properties [, duration] [, easing] [, complete] )

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




相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.