jquery - jQuery中的重复动画

Question

寻找更好的解决方案来动画天从 1 到 9。这是代码。

    var div = $("<p id='dd1'>Day 1</p>");
    $('#dd1').transition({
        scale: 2.2
    });
    $("#day").empty().append(div);
    for (var i = 1; i < 10; i++) {
        $('#dd' + i).transition({
            scale: 1.1,
            x: 180
        }, 4000, function () {
            var div = $("<p id='dd'" + (i + 1) + ">Day " + (i + 1) + "</p>");
            $("#day").empty().append(div);
        });
        setTimeout(function () {
            // blah blah
        }, 1000);
    }

Answer 1

试试这个方法——

你有问题

• id 的连接，即 "<p id='dd'" + (i + 1) + ">Day "您在 dd 之后关闭引号，该引号应该在下一个字符串的开头。
• 过渡是异步的，您需要在第一个的完整回调上调用下一个过渡。您的 for 循环在您的第二次转换发生之前完全运行，因此i值为 11，这就是您所看到的。

JS：

var div = $("<p id='dd1'>Day 1</p>"), i=1;
$('#dd1').transition({
    scale: 2.2
});
$("#day").empty().append(div);

function transit(){ //wrap it in function
    $('#dd' + i).transition({ 
        scale: 1.1,
        x: 180
    }, 4000, function () {
        var div = $("<p id='dd" + (i + 1) + "'>Day " + (i + 1) + "</p>");
        $("#day").empty().append(div);
        if(i <= 10){ //once complete check if you want to animate more if so call that again
            setTimeout(function(){
                transit(i++);
            },0);

        }
    });
}
transit(); //invoke to startup.

演示