Animate divs INTO the positions defined on the stylesheet

Question

I can easily animate divs FROM the stylesheet position to another position using JQuery, but is there an easy way to do the reverse? Basically I want to avoid changing my stylesheet, yet have divs start off the page and be animated into their correct position.

Answer 1

You can try doing something like this:

var origt = $("#yourdiv").offset().top, origl = $("#yourdiv").offset().left;
$("#yourdiv").css({top:"auto", left:"auto"}); /*or wherever you want them to start*/
$("#yourdiv").animate({top:origt, left: origl});

Hope that helped!

Answer 2

Can you use css() function from jquery to get their style attributes? How wide and long they should be and animate them using those values?

Answer 3

Set the div's display: none;

Find the original location via javascript.

Move them outside of the visible window.

Change them back to display: block;

Animate them from current position back to original values stored in JS.

Answer 4

I think you are asking: Can one pass class names to jQuery animate instead of defining an object literal of css properties.

http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles