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的连接，即你在dd后关闭引号的"<p id='dd'" + (i + 1) + ">Day "应该在下一个字符串的开头。
转换是异步的，您需要在第一个转换的完整回调上调用下一个转换。你的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.

<强> Demo

在jQuery中重复动画

1 个答案: