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

Question

我想按顺序移动拼图 block ，而不是一次

这是我的脚本:

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


        });

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

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

请注意，我的 Action 是可变的!

抱歉我的英语不好!

Answer 1

您可以使用 setTimeout 的组合方法和$.each()功能如下:

在这里拨弄: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
});

希望这会有所帮助!