JQuery.animate () only with CSS class, no explicit styles

Question

Using jQuery animation, I would like to work with the css classes defined somewhere in the .css file so as not to explicitly give all the jquery.animate () style options.

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

Answer 1

jQueryUI provides an extension for the animate function, which allows you to animate a css class.

edit : example here

There are also methods for the add / remove / toggle class, which may also be of interest to you.

Answer 2

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

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

This implementation may be useful to you.

Answer 3

Check out James Padolsi animateToSelector

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

Answer 4

In many cases, you'd better use CSS transitions for this, and in older browsers the easing will be instantaneous. Most animations (like fade in / out) are very trivial to implement, and the browser does all the work for you. https://developer.mozilla.org/en/docs/Web/CSS/transition