在jQuery中重复动画

Question

寻找一个更好的解决方案来动画从1到9的日子。下面是代码。

var div = $("<p id='dd1'>Day 1</p>"); 
    $('#dd1').transition({ 
     scale: 2.2 
    }); 
    $("#day").empty().append(div); 
    for (var i = 1; i < 10; i++) { 
     $('#dd' + i).transition({ 
      scale: 1.1, 
      x: 180 
     }, 4000, function() { 
      var div = $("<p id='dd'" + (i + 1) + ">Day " + (i + 1) + "</p>"); 
      $("#day").empty().append(div); 
     }); 
     setTimeout(function() { 
      // blah blah 
     }, 1000); 
    } 

Answer 1

尝试DD这应该是在明年字符串的开头后，这way-

你有问题ID即"<p id='dd'" + (i + 1) + ">Day "您关闭报价

• 级联。
• 转换是异步的，您需要在第一个回调的完整回调中调用下一个转换。您的for循环在第二次转换发生之前完全运行，因此i的值为11，这就是您所看到的。

JS：

var div = $("<p id='dd1'>Day 1</p>"), i=1; 
$('#dd1').transition({ 
    scale: 2.2 
}); 
$("#day").empty().append(div); 

function transit(){ //wrap it in function 
    $('#dd' + i).transition({ 
     scale: 1.1, 
     x: 180 
    }, 4000, function() { 
     var div = $("<p id='dd" + (i + 1) + "'>Day " + (i + 1) + "</p>"); 
     $("#day").empty().append(div); 
     if(i <= 10){ //once complete check if you want to animate more if so call that again 
      setTimeout(function(){ 
       transit(i++); 
      },0); 

     } 
    }); 
} 
transit(); //invoke to startup. 

Demo