Question

我想立即按顺序移动拼图块

这是我的剧本：

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


        });

使用此代码，所有Tiles一次向左移动，但我想按顺序移动切片

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

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

抱歉我的英语不好！

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

我希望这有帮助！

Answer 2

你的问题让我感兴趣所以我在jsfiddle上汇总了一个简单的例子：http://jsfiddle.net/jJ8vJ/

基本思想是使用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]);

Answer 3

这可以通过使用.each()方法来实现，为所有瓷砖提供类名并执行类似的操作

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

如何在Order中制作动画？

3 个答案: