如何逐个单元格地为表格中的元素设置动画？答案

【问题标题】：how to animate element in table cell by cell?如何逐个单元格地为表格中的元素设置动画？
【发布时间】：2013-02-13 07:13:42
【问题描述】：

我在表格单元格中有一个元素，我必须将它移动到另一个动画缓慢的单元格。我该怎么做。

<table>
<td ..

</table>

看演示DEMO

我从之前的thread得到了一些资源

我想在表格中逐个单元格地缓慢移动元素？演示中是否缺少任何内容？

【问题讨论】：

您不太可能移动表格单元格。使用绝对定位的 div

标签： javascript jquery animation jquery-animate

【解决方案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。

【讨论】：