如何在Order中動畫位置？

Question

我想移動序列中未在一旦拼圖瓷磚

這裏我的腳本：

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


     }); 

與此代碼，所有的瓷磚向左移動一次，但我想移動的瓷磚爲了

例如：移動＃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

這可以通過使用.each()方法來實現，給你所有的瓷磚類名和做類似的太

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

Answer 3

你的問題讓我感興趣讓我一起扔一個簡單的例子上的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]);