如何在將圖像附加到動畫時使用動畫緩慢移動圖像標記

我正試圖找到一種方法將圖像從一個單元格移動到使用動畫的其他單元格。
我知道根據使用animate()功能如何做到這一點：
jQuery to animate image from left to right?如何在將圖像附加到動畫時使用動畫緩慢移動圖像標記

我想找到一個辦法做到這一點，當我追加圖像到新的小區。
enter image description here

你這裏的DEMO：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; 
};

來源

2014-10-11 E235

問題在於你的小提琴的創作。見[這]（http://jsfiddle.net/305eyytw/1/） – 2014-10-11 20:18:54

謝謝，我用正確的小提琴編輯我的問題。我仍然在尋找一種方法來創造動畫時，將圖像追加到新的單元格 – E235 2014-10-11 20:23:19

緩慢ü可以更改$（士兵）.animateAppendTo（newCell，1000）;變成$（士兵）.animateAppendTo（newCell，2000）;如此 – 2014-10-11 20:34:26

問題是與你的.position()或許你的邏輯，因爲newEle.position()總是返回{top: 0, left: 0} ofcourse，因爲你沒有改變它。使用這種替代的功能，它應該工作：

$.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的假定寬度，答案以獲得士兵的大概位置，並在.animate()的第一個參數中修復了您的問題，該參數接受了一個對象，並使得該士兵在您留出時間的情況下在1000毫秒內以192像素的增量增加了動畫。希望工程。

Fiddle.

UPDATE： 不管怎麼說，這裏是沒有任何計算有效的解決方案：

$.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").position().left這幾乎讓我們的的x-axis位置td3你想要的士兵。

來源

2014-10-11 20:36:29

我熟悉這一點。我想避免這種計算，因爲這是我創建的遊戲的一部分，它使用appendTo（）函數更舒服，但使用「+ =」 – E235 2014-10-11 20:56:34

@EviatarG緩慢。計算是遊戲的一部分（不是你創建的那個，而是一個雙關的意圖），要麼將它存儲在一個變量中，要麼在你的代碼中註釋掉它是如何產生的 – 2014-10-12 14:42:45

如何在將圖像附加到動畫時使用動畫緩慢移動圖像​​標記

回答

相關問題

如何在將圖像附加到動畫時使用動畫緩慢移動圖像標記