[jQuery] Animating from one CSS class to another

[S. Robert James]

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...)