在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