對在函數中創建的div的子項進行動畫處理（使用js或jquery）

Question

我正在學校上編碼課，對javascript還是很陌生，所以希望我要問的是有道理的！

現在，我有一個頁面，如果您單擊html按鈕，蠕蟲的圖像將顯示在其下方的div中（稱為“錯誤”）。 每次您單擊按鈕時，都會出現相同的圖像。 我通過單擊按鈕來調用一個函數，該函數創建一個img元素並將其添加為div的子元素，從而實現了這一目的。 問題是我希望圖像在頁面上甚至在div內隨機移動。 我已經找到了一些可以使div動畫化的代碼，因此它可以使用jQuery（ 在此處 ）隨機移動，但是我一生無法弄清楚如何將其應用於圖像。

使圖像變得清晰的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/

編輯（基於來自注釋的更多信息）

因此， 新的核心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/