用javascript動畫動態創建的div

Question

我正在嘗試使用javascript為動態創建的div設置動畫，在創建div時會為其分配id，一切正常，直到嘗試為一個div設置動畫，我正在嘗試這樣做：

function start() // Called from a button click
{

  var moveDiv= document.getElementById('Id0'); // Id0 is the Id of the div to move
  animate(moveDiv); // Recursive animate
}

function animate(inDiv) 
{
  inDiv.style.left = parseInt(inDiv.style.left)+1+'px';
  setTimeout(animate,20); // Recursive call
}

我知道這應該將div無限向左移動。 但是什么也沒有發生，我也不知道為什么，我不認為這是我在檢查所有Id且它們都存在時動態創建div的事實，所以我不認為它是因為找不到它Id0，但以防萬一，這是我的div創建代碼的片段：

for(var i=0; i<ca.length; i++)
      {
          var c = ca[i].trim();
          var start = c.indexOf('"coursename":"') + 14;
          var end = c.indexOf('","coursemark":"');
          var CC = c.substring(start,end);

          var start = c.indexOf('","coursemark":"') + 16;
          var end = c.indexOf('%"')+1;
          var CM = c.substring(start,end);
          var idCount = i;
          var div = document.createElement("div");
          div.style.width = "180px";
          div.style.height = "75px";
          div.style.backgroundColor = "rgba(0,100,175,0.8)";
          div.style.color = "white";
          div.style.marginTop = "2%";
          div.style.marginLeft = "50%";
          div.id = "sortID"+idCount;
          div.innerHTML = "Course Name : " + CC +  " Course Mark : " + CM + " Id : " + div.id;
          document.body.appendChild(div);

      }

這段代碼可以正常工作，並且完美地創建了div，我只是無法移動任何div。 任何幫助將不勝感激。

Answer 1

幾個問題...

function start() // Called from a button click
{
  var moveDiv= document.getElementById('Id0'); // Id0 is the Id of the div to move
  animate(moveDiv); // Recursive animate
}

• 沒有ID為Id0元素。 您生成的所有元素ID都類似於sortID...

接着...

function animate(inDiv) 
{
  inDiv.style.left = parseInt(inDiv.style.left)+1+'px';
  setTimeout(animate,20); // Recursive call
}

• inDiv.style.left從未啟動
• 您沒有將inDiv傳遞給遞歸animate調用

因此，首先檢查您的元素引用。 然后，請確保您正確設置了div的位置，或者在未設置div的情況下進行處理。 最后確保您遞歸地通過inDiv 。