如何为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中查找可能的错误。