Jquery 如何按顺序设置位置动画？

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

下面是我的脚本：

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


        });

$（文档）.ready（函数（）{
$（“#左”）。单击（函数（）{
对于（变量i=1；i

有了这个代码，所有的瓷砖都会一次向左移动，但我想按顺序移动瓷砖

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

注意，我的动作是可变的

---

对不起，我的英语不好！

这可以通过使用

来实现。each（）

方法，给所有的tile指定一个类名，并执行类似的操作

$(document).ready(function () {
    $("#left").click(function () {
        $('.tiles').each(function() {
            $(this).animate({ "left": "+=50px" }, "slow");
        });
    });
});

---

您可以将方法和函数结合使用，如下所示：

在这里拉小提琴：

示例HTML

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

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

---

我希望这有帮助！

您的问题让我感兴趣，因此我在JSFIDLE上提供了一个快速示例：

基本思想是使用jQuery

.animate（）函数的回调函数来迭代要设置动画的DOM元素列表

//first I'm setting up the variables I'll need
var $items     = [$('#one'), $('#two'), $('#three'), $('#four')],//stores the DOM elements to be animated in order
    item_index = 0,//stores the current index in the animation queue
    animations = {
        '0px0px'     : { left : '100px', top : '0px' },
        '100px0px'   : { left : '100px', top : '100px' },
        '0px100px'   : { left : '0px'  , top : '0px' },
        '100px100px' : { left : '0px'  , top : '100px' }
    };//this stores the conversion between where the element is and where it should animate to

//setup a function that can call itself inside the animation callback to iterate through the DOM elements to be animated
function run_animation($element) {

    //check to make sure there are more DOM elements to animate, if none are found then the process is done
    if (item_index in $items) {

        //get this element's top and left CSS properties and put them together so we can convert that to the next coordinates it needs
        var css = $items[item_index].css('left') + '' + $items[item_index].css('top');

        //now animate this element by converting the current top/left CSS properties to its next coordinates
        $items[item_index].animate({
            left : animations[css].left,
            top  : animations[css].top
        }, 1500, function () {

            //here we run this same function for the next index
            item_index++;
            run_animation($items[item_index]);
        });
    }
}

//run the animation function for the first time
run_animation($items[item_index]);

“$（文档）.ready（函数（）{var i=0；$（“#left”）。单击（函数（）{$（'.tile'）。每个（函数（）{i++；var string=“#s”+i.toString（）；$（string）.动画（{“left”：“+=50px”}，“slow”）；}）'thanx…我测试了这段代码，但那不起作用，并且做了我写的同样的事情！所有的瓷砖一起移到左边！！！是的…不幸的是，这比刚才要复杂一点。我将制作一个演示，但必须在几秒钟后离开，所以可能需要等待几分钟。对不起，thanx，等待你的时间…我必须解决这个问题。。。我对2个元素使用回调函数，但我不知道如何对可变元素使用它！如何？！为什么在
.animate（）
函数提供回调时设置超时？@Jasper:因为可以使动画部分重叠，而不是完全按顺序运行。
//first I'm setting up the variables I'll need
var $items     = [$('#one'), $('#two'), $('#three'), $('#four')],//stores the DOM elements to be animated in order
    item_index = 0,//stores the current index in the animation queue
    animations = {
        '0px0px'     : { left : '100px', top : '0px' },
        '100px0px'   : { left : '100px', top : '100px' },
        '0px100px'   : { left : '0px'  , top : '0px' },
        '100px100px' : { left : '0px'  , top : '100px' }
    };//this stores the conversion between where the element is and where it should animate to

//setup a function that can call itself inside the animation callback to iterate through the DOM elements to be animated
function run_animation($element) {

    //check to make sure there are more DOM elements to animate, if none are found then the process is done
    if (item_index in $items) {

        //get this element's top and left CSS properties and put them together so we can convert that to the next coordinates it needs
        var css = $items[item_index].css('left') + '' + $items[item_index].css('top');

        //now animate this element by converting the current top/left CSS properties to its next coordinates
        $items[item_index].animate({
            left : animations[css].left,
            top  : animations[css].top
        }, 1500, function () {

            //here we run this same function for the next index
            item_index++;
            run_animation($items[item_index]);
        });
    }
}

//run the animation function for the first time
run_animation($items[item_index]);