71

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?

redsquare
  • 78,161
  • 20
  • 151
  • 159
rudnev
  • 2,281
  • 3
  • 22
  • 31

4 Answers4

78

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.

Jakub Arnold
  • 85,596
  • 89
  • 230
  • 327
  • I thought this extension only provided support for additional css properties. Could you provide a link to documentation of this behaviour? – Scharrels Aug 08 '09 at 11:44
  • maybe it is just webkit, but i've never been that much deceived by any jq or ui functionnalities. – Ben Dec 29 '11 at 11:36
  • 1
    FYI Currently jQuery UIs addClass() doesn't work with IEs proprietary filters E.g. "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" as it only works on scalar values... If only they polyfilled this as they do with animate.. – experimenter Apr 17 '13 at 13:15
6

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.

Scharrels
  • 3,055
  • 25
  • 31
4

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.

redsquare
  • 78,161
  • 20
  • 151
  • 159
1

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

Dominic
  • 62,658
  • 20
  • 139
  • 163