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
  • 77,122
  • 20
  • 149
  • 156
rudnev
  • 2,241
  • 3
  • 21
  • 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
  • 83,249
  • 86
  • 225
  • 325
  • 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.. – htmlr 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,028
  • 23
  • 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
  • 77,122
  • 20
  • 149
  • 156
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
  • 56,023
  • 17
  • 130
  • 152