Javascript – How to restart/reset Jquery animation

animationjavascriptjquery

How can i reset an animation in jquery ? For example:

CSS

.block {
    position:absolute;
    top: 0;
    left: 0;
}

JS:

$('.block').animate({
    left: 50,
    top: 50
});

If I do :

$('.block').stop();

the animation will stop. But how can i clear the position, to start over ? from point 0,0.

Best Solution

When jQuery is animating an element, it adds the style related information in the style attribute. If you need to reset the element to it's base style without the jQuery css, simply remove this attribute at the end of the animation - See .animate() on jQuery API.

$('.block').animate({
    left: 50,
    top: 50
}, 'slow', function () { $(this).removeAttr('style'); });

The callback function will remove the style attribute and reset the element at the end of the animation.