Question

I’m trying to use jQuery UI’s animation of adding/removing classes to toggle a class on a parent element that would animate many changes in various child elements throughout the page. I can get this to work when the CSS change directly affects the element I’m adding the class too, but it doesn’t seem to animate changes on child elements.

For example, if my HTML is like so:

<div class="parent">
  <span class="child">added to my parent</span>
</div>

CSS:

.red-parent .child { background-color: red; }

When I try to do $( ".parent" ).addClass("red-parent",2000), there is no animation on .child – after 2 seconds the color snaps to red.

jsFiddle with comparison here.

Any suggestions would be greatly appreciated!

Update:

I still can’t figure this out, but am able to approximate the effect in compatible browsers using CSS3’s transitions:

.child {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

This means I don’t have to worry about jQuery animations – don’t have to use jQuery UI at all. addClass() etc. will automatically be animated. But still, shouldn’t jQuery UI be able to do this? CSS transitions are a bit overkill for what I want, and can get in the way of other animations I want to do on the same elements (hovering over menu items, for instance).

Answer 1

jQuery UI 1.8.x only animates the properties of the class added/removed from the specified element “.parent”. Then the decedents “pop” their properties at the end of the animation. If you want to animate the children, then add the class to each child and update your CSS for the children.

I’ve also replaced the mouse event with “.click”, and the method with “.toggleClass”.

$(function() {
    $( "#button" ).click(
        function() {
            $( ".parent" ).children().toggleClass("red", 2000);
        });
});

jsFiddle example: http://jsfiddle.net/bTcAV/1/