Question

After I animate an object with JQuery to another position an back to it’s original position it sticks with this position even if its values are chaning in the css in a media query step.

Code:

$(".object").animate({ top: "-=85px"}).delay("3000").animate({ top: "285px"});

.object {
    top: 285px;
}

It should apply this media query:

.object {
    top: 50px;
}

But when I pass the window with when the new value should be executed it will stick with the 285px since it’s the last animated value.

Is there a command like “remove all added values from JQuery from this object after animation and stick back again with the given values from the css”?

Since this is an animation I can not use css classes to do a workaround.

Answer 1

Just remove the top property after the animation is done:

$(".object").animate({ top: "-=85px"}).delay(3000).animate({ top: "285px"}, {
    complete: function() {
        $(this).css('top', '');
    }
});