Question

I’m looking for a library that will allow me to easily use CSS Transitions via jQuery’s addClass / removeClass / toggleClass functions. i.e. I want these functions to do nothing (other than just adding a CSS class) in webkit, but use jQuery animations in IE. jQueryUI replaces these 3 functions and comes close to what I need, but it only works on the exact element (e.g $('#myID').addClass('foo'); doesn’t animate #myID.foo .someClass)

I’ve looked around and can’t find anything that does this, hopefully someone knows of one 🙂 If not, the solution requires:

1. parsing all stylesheets on the page for CSS transition properties
2. matching all stylesheets with transitions (e.g. -webkit-transition)
3. storing these stylesheets
4. on addClass, etc match current and down the tree (e.g. .addedClass .someOtherClass)
5. apply animations to all matched elements (or to the style rule)

So if anyone knows of any existing solutions to parse stylesheets (the text of them) or to animate a rule (instead of individual nodes), that would be helpful as well.

Answer 1

looks like you want something like jQuery++

jQuery.animate overwrites $.fn.animate to use CSS 3 animations if
possible. It takes the same arguments as the original $.fn.animate and
will fall back to jQuery’s JavaScript animation if a CSS animation is
not possible.

your proposed approach seems a little bit complicated to me, but maybe somebody comes up with a solution for this 😉