title: How to move image slowly with animation when appending the image to <td> tag
body: <p>I am trying to find a way to move image from one cell to other cell using animation.<br>
  I know how to do it using the <code>animate()</code> function according to:<br>
  <a href="https://stackoverflow.com/questions/7957962/jquery-to-animate-image-from-left-to-right">jQuery to animate image from left to right?</a>  </p>
  
  <p>I want to find to a way to do it when I am <strong>appending</strong> image to a new cell.<br>
  <img src="https://i.stack.imgur.com/gC0Xm.png" alt="enter image description here"></p>
  
  <p>You here the DEMO: <a href="http://jsfiddle.net/305eyytw/1/" rel="nofollow noreferrer">http://jsfiddle.net/305eyytw/1/</a></p>
  
  <p><strong>HTML:</strong>  </p>
  
  <pre><code>&lt;body&gt;
  &lt;table oncontextmenu="return false"&gt;
  &lt;tr&gt;
  &lt;td cellnumber="21" row="4" col="0"&gt;&lt;span&gt;21&lt;/span&gt;
  &lt;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;"/&gt;
  &lt;/td&gt;
  
  &lt;td cellnumber="22" row="4" col="1"&gt;&lt;span&gt;22&lt;/span&gt;&lt;/td&gt;
  
  &lt;td id="td3" cellnumber="23" row="4" col="2"&gt;&lt;span&gt;23&lt;/span&gt;&lt;/td&gt;  
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>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;
  };
  </code></pre>