[jQuery] Animating from one CSS class to another
I have a animation using jQuery, which goes from one position to
another. Right now, the positions are coded into JavaScript:
$("#widget").animate({top: '500px'})
Instead of hard-coding 500px into JavaScript, or even passing it as a
parameter, I'd much rather set them in CSS, and run the animation from
that. That keeps all the design & layout together, and allows
identical JavaScript to work with both of them. Something like:
#widget.down {
top: 300px;
}
#widget.up {
top: 500px;
}
$("#widget").animate({class: 'up'})
Any jQuery hacker's have a suggestion on how to do something like
that? Is it possible to read the values off of the CSS stylesheet?
(In general, what's everyone's opinion about this method. I think
it's a lot cleaner, keeping cohesion up and coupling down...)