Question

我已经能够使用jquery为div设置动画，并且我已经能够动态创建div。但是，在动态创建div之后，我就会对div进行动画处理。

下面的代码动态创建div ok：

 var nameArray = [
    "Jimmy",
    "Sonny",
    "Sammy",
    "Henry",
    "Hank",
    "Susan",
    "Sebby",
    "Alyssa",
    "Pepper",
    "Ken",
    "Steve",
    "Kandi",
    "Wes"
    ];
  var numberStudents = nameArray.length;
  var interval;

  for(n = 0; n < numberStudents; n++){
        var divName = "#floatName" + n;
        console.log(divName);
        var names = nameArray[n];
        var divTag = document.createElement('div');
        divTag.id = divName;
        divTag.innerHTML = names;
        divTag.style.position = "absolute";
        divTag.className = "randomFloat";
        document.body.appendChild(divTag);
  };

如果我手动输入div，则以下动画有效：

var loopAllowed = false;
  $( "#go" ).click(function() {
    loopAllowed = true;
    var max = 12;
    var loop = function(){
      for(i = 0; i < 12; i++){
        var divName = "floatName" + i;
        console.log(divName);
        $( "#" + divName ).animate({
            left: Math.random()*500 + "px",
            top: Math.random()*500 + "px"
        }, 500, i == max - 1 && loopAllowed ? loop : undefined);
      }
     };
     loop(); 
    });

  $( "#stop" ).click(function() {
        loopAllowed = false;
  });

我认为问题可能与必须委派一个事件有关。一个想法是使用

$( "#randomFloat" ).on("click", "#go", function() {

我从这里读到这个想法：jQuery - selecting dynamically created divs

虽然在我的情况下不起作用。

JSFiddle用于动态创建的div，我遇到了以下问题： https://jsfiddle.net/shmish/1fj32749/17/

JSFiddle，用于手动创建div并为其设置动画：https://jsfiddle.net/shmish/3s5vn2yL/2/

Answer 1

为生成的DIV命名时出错：

var divName = "#floatName" + n;

更改为

var divName = "floatName" + n;

ID属性

因为现在您的DIV是这样生成的：

<div id="#floatName0" class="randomFloat">Jimmy</div>

要使用jQuery选择它，您需要编写：

$("##floatName0")

引发Sizzle-Error：

未捕获错误：语法错误，无法识别的表达式：## floatName0

请参阅更新的小提琴：https://jsfiddle.net/1fj32749/19/

另请参阅ID的有效值：What are valid values for the id attribute in HTML?

Answer 2

编辑!!!：我发现了您的错误

在动态创建div时更改（但不在jquery部分中）

var divName = "#floatName" + n;

到

 var divName = "floatName" + n; //remove #

所以问题是在纯javascript中，你没有用＃来指定id

最终代码：

var nameArray = [
    "Jimmy",
    "Sonny",
    "Sammy",
    "Henry",
    "Hank",
    "Susan",
    "Sebby",
    "Alyssa",
    "Pepper",
    "Ken",
    "Steve",
    "Kandi",
    "Wes"
    ];
var numberStudents = nameArray.length;
  var interval;  
  for(n = 0; n < numberStudents; n++){
        var divName = "floatName" + n; // THIS WAS THE PROBLEM
        console.log(divName);
        var names = nameArray[n];
        var divTag = document.createElement('div');
        divTag.id = divName;           // BECAUSE HERE SHOULDN'T HAVE #
        divTag.innerHTML = names;
        divTag.style.position = "absolute";
        divTag.className = "randomFloat";
        document.body.appendChild(divTag);
  };

  $( document ).on('click', '#go', function() {
    var gotime = 1;
    interval = setInterval(function () {
      for(i = 0; i < 12; i++){
        
        $( "#floatName" + i ).animate({
        	left: Math.random()*500 + "px",
        	top: Math.random()*500 + "px"
        });
      };
      gotime += 1;
      if (gotime > 100) {
        clearInterval(interval);
      }
    }, 500) 
  });

  $( "#stop" ).click(function() {
        clearInterval(interval);
  });

.randomFloat {
    color: red;
    transition: 0.5s left, 0.5s top;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is this it?
<button id="go">&raquo; Run</button>
<button id="stop">&raquo; Stop</button>
<div id="randomFloat">Is it??</div>

如何动态创建div的动画？

2 个答案: