如何动画在顺序中的位置？ [英] how to animate position in Order?

问题描述

我想移动序列中的难题瓷砖没有立即

i want to move the Puzzle Tiles in sequence not at once

在这里我的脚本：

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


        });

本code，所有的瓷砖向左移动一次，但我想移动的瓷砖订单

with this code, all the Tiles move to the left at once but i want to move the tiles in Order

例如：移动＃S1到左，经过2第二次搬迁＃S2来，并继续...

for example : move #s1 to left , after 2 second move #s2 to up and continue...

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

note that my moves is variable!

对不起我的英文不好！

推荐答案

您可以使用的setTimeout 方法和 $。每（）这样的功能：

小提琴这里： 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的code

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
});

我希望这有助于！

I hope this helps!

这篇关于如何动画在顺序中的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！