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

如何在jQuery中为克隆元素制作动画

1 个答案: