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无限地向左移动。但是没有任何事情发生，我无法弄清楚为什么，我不认为我动态创建div的事实，因为我检查了所有的ID并且它们都存在所以我不知道认为它是因为它无法找到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的位置，或处理尚未设置的场景。最后确保通过递归方式传递inDiv。

使用javascript动画创建div的动画

1 个答案: