jQuery.animate() with css class only, without explicit styles

Using JQuery animate I would like to operate with css classes, defined somewhere in .css file, not to have to give all styles params to jquery.animate() explicitly.

I can create a fake (e.g. invisible) element with such a class, read its css properties and give them to jquery.animate() - does anybody know a better way?

The jQueryUI provides a extension to animate function that allows you to animate css class.

edit: Example here

There are also methods to add/remove/toggle class which you might also be interested in.

Weston Ruther built a similar thing using the WebKit proposal for css transitions:

http://weston.ruter.net/projects/jquery-css-transitions/

This implementation might be useful for you.

Check out James Padolsey's animateToSelector

> Intro: This jQuery plugin will allow > you to animate any element to styles > specified in your stylesheet. All you > have to do is pass a selector and the > plugin will look for that selector in > your StyleSheet and will then apply it > as an animation.

In many cases you're better off using CSS transitions for this, and in old browsers the easing will simply be instant. Most animations (like fade in/out) are very trivial to implement and the browser does all the legwork for you. https://developer.mozilla.org/en/docs/Web/CSS/transition