Javascript 如何在jQuery中设置克隆元素的动画

今天我一直在尝试编写一个函数，它将克隆一个元素，然后设置克隆动画，然后删除前一个元素并循环它

在中有一个带有数字的徽章，用于计算动画播放的次数。我想给这个徽章制作动画，这样它可以缩放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”开始显示

该函数稍后将在其他函数中调用，如有必要，我将尝试对整个想法进行类似的修改

---

干杯

您的代码正常。我不知道你如何调用badgeClone（），但对我来说它是有效的。看看这把小提琴：

---

请在控制台中查找可能的错误

你发布的代码在这里起作用：这很奇怪，它不想起作用，但现在起作用了。当然，我后来调用了这个函数。你能提供更多的代码或者看看你的javascript控制台并将内容粘贴到这里吗？

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(); 
        });          
 }