如何為jQuery中的克隆元素設置動畫

Question

今天，我一直在嘗試編寫函數，該函數將克隆一個元素，然后對克隆進行動畫處理，然后刪除先前的一個並將其循環。

上面有一個帶有數字的徽章，可以計算動畫消失的次數。 我想為該徽章制作動畫，因此它將縮放2倍，獲得下一個數字並恢復為正常大小。

現在，我僅嘗試對徽章進行動畫處理，然后將所有內容組合在一起。 我想出了那個代碼：

function badgeClone() {

var badge1 = $('.badge');
var badge2 = $('.badge').clone();

var badgeWidth = badge1.width();
var badgeHeight = badge1.height();

    badge1.after(badge2);

    badge2.animate({
        'width': badgeWidth * 2 + 'px',
        'height': badgeHeight *2 + 'px'},
        500);

}

但老實說，在document.ready中調用該函數后，它什么也沒做。 我認為我做錯了，但是從邏輯上講，它應該可以工作。

謝謝大家的幫助，加油！

編輯：

我向該函數添加了該計數器，但是我不知道為什么它不返回初始0，而是從“ 1”開始顯示。

var count = 0;

function badgeClone() {

var badge1 = $('.badge');
var badge2 = $('.badge').clone();

var badgeWidth = badge1.width();
var badgeHeight = badge1.height();

    badge1.text(count);

    badge1.after(badge2);

    badge2.animate({
        'width': badgeWidth * 2 + 'px',
        'height': badgeHeight *2 + 'px'},
        200, function() {

            count++
            badge2.text(count);

            badge2.delay(200).animate({
                'width': badgeWidth + 'px',
                'height': badgeHeight + 'px'},
                200);
            badge1.remove(); 
        });          
 }

該函數稍后會在其他函數中調用，如有必要，我將嘗試對整個想法進行類似的擺弄。

干杯!

Answer 1

您的代碼還可以。 我不確定您如何調用badgeClone（），但對我來說卻有效。 看看這個小提琴： http : //jsfiddle.net/

還請在您的控制台https://developers.google.com/chrome-developer-tools/docs/javascript-debugging?hl=de中查找可能的錯誤。