Question

我正在尝试使用动画找到一种将图像从一个单元格移动到另一个单元格的方法根据以下内容，我知道如何使用animate()功能执行此操作：
jQuery to animate image from left to right?

当我将图像附加到新单元格时，我想找到一种方法。
enter image description here

你在这里发表演说：http://jsfiddle.net/305eyytw/1/

HTML：

<body>
<table oncontextmenu="return false">
<tr>
<td cellnumber="21" row="4" col="0"><span>21</span>
<img src="http://s4.postimg.org/58a4av7a5/player_1.png" cellnumber="21" class="soldiers" playernumber="1" soldiernumber="1" onclick="onMouseClickSoldier(this)" style="top: 0px; left: 0px;"/>
</td>

<td cellnumber="22" row="4" col="1"><span>22</span></td>

<td id="td3" cellnumber="23" row="4" col="2"><span>23</span></td>  
</tr>
</table>
</body>

CSS：

td {
    width: 90px;
    height: 80px;
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
    position: relative;
}
table
{
    position: fixed;
    left:9px;
    top:8px;
}

tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
    background:#00A2E8;
}

.soldiers
{
    width:20px;
    height:20px;
    position: absolute;
}

td span {
    position: absolute;
    bottom: 0;
}

JavaScript的：

function onMouseClickSoldier(soldier)
{
    //alert(3);
    var newCell = $("#td3"); 
    //$(soldier).appendTo(newCell);
    $(soldier).animateAppendTo(newCell, 1000);
}


$.fn.animateAppendTo = function(sel, speed) {
    var $this = this,
        newEle = $this.clone(true).appendTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.css('position', 'absolute').animate(newPos, speed, function() {
        newEle.show();
        $this.remove();
    });
    return newEle;
};

Answer 1

问题在于您的.position()和您的逻辑，因为newEle.position()总是返回{top: 0, left: 0}，因为您没有更改它。使用此函数替换它应该工作：

$.fn.animateAppendTo = function (sel, speed) {
    var $this = this,
        newEle = $this.clone(true).appendTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.animate({
        left: "+=" + 192
    }, speed);
    return newEle;
};

我所做的是，我看到了一个td的宽度并将其乘以2并将图像的假定宽度12添加到答案中以获得士兵的大致位置并将问题修复为{ {1}}的第一个参数，它接收一个物体并使士兵在你给出时间时以1000毫秒的增量为192像素增加左边的动画。希望有效。

Fiddle.

<强>更新无论如何，这是一个无需任何计算的解决方案：

.animate()

这里的魔力就是使用$.fn.animateAppendTo = function (sel, speed) { var $this = this, newEle = $this.clone(true).appendTo(sel), newPos = newEle.position(); newEle.hide(); $this.animate({ left: "+=" + $("#td3").position().left }, speed); return newEle; };，它几乎为我们提供了你想要士兵的td3的$("#td3").position().left位置。

在将图像附加到标记时，如何使用动画缓慢移动图像

1 个答案: