How to move image slowly with animation when appending the image to tag


Tags: javascript,jquery,html,css,jquery-animate

Problem :

I am trying to find a way to move image from one cell to other cell using animation.
I know how to do it using the animate() function according to:
jQuery to animate image from left to right?

I want to find to a way to do it when I am appending image to a new cell.
enter image description here

You here the 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;
};


Solution :

The problem is with your .position() and perhaps your logic because newEle.position() always returns {top: 0, left: 0} ofcourse because you haven't changed it. Use this replacement of the function and it should work:

$.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;
};

What I have done is that I saw the width of one td and multiplied it by 2 and added an assumed width of the image, 12, to the answer to obtain the approximate position of the soldier and fixed your problem in the .animate()'s first parameter which takes in an object and made the soldier animate to left with an increment of 192 pixels over 1000ms as you gave the time. Hope that works.

Fiddle.

UPDATE: Anyways, here is a solution that works without any calculations:

$.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;
};

The magic here is to use $("#td3").position().left which pretty much gives us the x-axis position of the td3 where you want the soldier to be.


    CSS Howto..

    How to handle the html and css of one side image and other side content and vice versa

    How to create dynamic business listings in wordpress [closed]

    How granular are CSS rem units?

    How do I overlay text on an image who's size is to be set?

    How to make this layout more responsive in CSS?

    How to inline the contents of an entire stylesheet with Wordpress?

    how to position heading in the center of the page

    How to make a dotted underline link on hover?

    JQuery toggled div not showing on resize

    How to style the last element before another specific element in CSS? [duplicate]

    How to center two square blocks in page?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to find the css file name associated with an element?

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to increase spacing between dt tags

    How to use fadeIn with css property change jquery

    How to animate multiple elements at the same time?

    How to format this form using only CSS

    How to make images to go out of the div when width is over the max-width?

    How to select children in CSS

    How to make dropdown list unselectable?

    How to change decoration of a local HTML file to show it on the WebView in Android

    how to textalign in middle with css?

    How to create equal height columns in pure CSS [duplicate]

    How to specify a CSS border on hover around thumbnails?

    how to change browsers default scrollbar using css or jquery

    How to bottom align a title of variable length

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    How to inject css in another page

    how to prevent css inherit?