如何在Order中制作动画？

我想不按顺序移动拼图块

在这里我的脚本：

$(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

示例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()方法来实现，为所有tile提供类名并执行类似的操作

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