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?

4 Answers 4

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.

Sign up to request clarification or add additional context in comments.

3 Comments

I thought this extension only provided support for additional css properties. Could you provide a link to documentation of this behaviour?
maybe it is just webkit, but i've never been that much deceived by any jq or ui functionnalities.
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..
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.

Comments

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.

Comments

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

1 Comment

This link is broken now :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.