为在函数中创建的 div 的子级设置动画（使用 js 或 jquery）

Question

我正在学校学习编码课程，并且对 javascript 非常陌生，所以希望我所问的内容是有意义的！

现在我有一个页面，如果单击 html 按钮，蠕虫的图像会出现在其下方的 div 中（称为“bugs”）。每次单击按钮时都会出现相同的图像。我通过让按钮单击调用一个创建 img 元素并将其添加为 div 的子元素的函数来完成此操作。问题是我希望图像在页面周围随机移动，甚至只是在 div 内。我找到了一些可以为 div 设置动画的代码，因此它使用 jQuery (here) 随机移动，但我终生无法弄清楚如何将其应用于图像。

制作图片的js代码如下：

var BugSpace = document.getElementById("bugs");

function NewWorm(){
  WormPic = document.createElement("img");
  WormPic.src = "worm.png";
  BugSpace.appendChild(WormPic);
};

我的大部分代码都是从各种教程拼凑而成的，因此可能相当复杂。无论如何，如果有人能弄清楚这一点，我将永远感激不尽:~)

编辑：我想我应该进一步澄清代码包括另外两个按钮来制造另外两种类型的错误！我希望能够一次在页面上移动每个错误的几张图像。我认为最好的方法是找到一种方法来为“bug”div 的孩子设置动画？但是，我想知道我的问题的答案是否可能是对我现在拥有的代码的完全修改！

Answer 1

如果您习惯使用 jQuery，那么您可以使用以下解决方案。

您基本上仍然会为div 设置动画，并且因为img 包含在div 中，所以它也会设置动画。

您只需在添加图片后调用animateDiv() 函数即可。

$(document).ready(function(){
    $button = $('#button');
    $bug = $('#bug');
    $wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";

    $button.on('click', function(){
        $bug.html($wormimg);
        animateDiv();
    }); 
});

这里的animateDiv()函数和你提供的链接一模一样。

看看 jsfiddle：http://jsfiddle.net/3xgqogkk/

编辑（基于来自 cmets 的更多信息）

所以 new 核心 javascript 看起来像：

$(document).ready(function(){
    $button = $('#button');
    $bug = $('#bug');
    $wormimg = "<img src='http://bit.ly/1r7l5ns' class='worm'/>";

    $button.on('click', function(){
        $bug.append($wormimg); //Changed this to append so we can add more than 1
        animateDiv($bug.children().last()); 
        //We're basically passing the last worm you've added as a variable
    }); 
});

这意味着您必须对animateDiv() 方法进行一些修改，现在实际上是animateDiv($worm)

function animateDiv($worm){
    var newq = makeNewPosition();
    var oldq = $worm.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $worm.animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv($worm);        
    }); 
};

重要的是要了解这里发生的一切，所以如果你有任何问题，尽管问:)

jsfiddle也更新了：http://jsfiddle.net/3xgqogkk/