如何为订单中的位置设置动画？

我想按顺序移动拼图块，而不是立即移动

这是我的脚本：

$(document).ready(function () {
        $("#left").click(function () {
            for (var i = 1; i < length; i++) {
                var string = "#s" + i.toString();
                $(string).animate({ "left": "+=50px" }, "slow");
            }


        });

使用此代码，所有图块立即向左移动，但我想按顺序移动图块

例如：将 #s1 向左移动，2 秒后将 #s2 向上移动并继续...

请注意，我的动作是可变的！

对不起，我的英语不好！

您可以使用以下组合设置超时时间 http://www.w3schools.com/jsref/met_win_settimeout.asp方法和$.each() http://api.jquery.com/jQuery.each/像这样的函数：

在这里小提琴：http://jsfiddle.net/a7Mx4/ http://jsfiddle.net/a7Mx4/

示例 HTML

<div id="#left">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

示例 CSS

.tile {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background: #ff0000;   
}

jQuery 代码

function anim($target){
    $target.animate({'left' : '+=50px'}, 'slow');
}

$('.tile').each(function(index, el){
    var $target = $(this);
    setTimeout(function(){anim($target)}, (1000 * index)); // Change 1000 to +/- delay
});

我希望这有帮助！