如何在單元格中逐個單元格動畫元素？

Question

我在表格單元格中有一個元素，我必須將其移動到另一個具有慢動畫的單元格的方向。我該怎麼做。

<table> 
<td .. 

</table> 

看看演示DEMO

我從以前thread

我想通過細胞在表中移動的元素慢慢細胞得到了一些資源？演示中是否有缺失？

Answer 1

您的小提琴中的代碼正常工作，但是由於您在循環中運行動畫調用，因此它將快速運行，您或多或少地同時調用所有動畫。我改變了一下方法：

$("#move").bind("click",animate); 

var direction=[4,7,8,11] 
function animate(){ 
    // initalize with first element of direction array 
    moveAnimate("#p11",0); 
} 


function moveAnimate(element, count){ 
    if(count >= direction.length) {return; } 
     // set the newParent 
     var newParent = '#pos' + direction[count], 
      element = $(element); //Allow passing in either a JQuery object or selector 

    newParent= $(newParent); //Allow passing in either a JQuery object or selector 
    var oldOffset = element.offset(); 
    element.appendTo(newParent); 
    var newOffset = element.offset(); 

    var temp = element.clone().appendTo('body'); 
    temp.css('position', 'absolute') 
     .css('left', oldOffset.left) 
     .css('top', oldOffset.top) 
     .css('zIndex', 1000); 
    element.hide(); 
    temp.animate({'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){ 
     element.show(); 
     temp.remove(); 
     // increase the counter 
     count++; 
     // call next animation after the current one is finished 
     moveAnimate(element,count); 
    }); 
} 

更新fiddle is here。