title: jQuery UI's addClass animations not animating changes on child elements
body: <p>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.</p>
  
  <p>For example, if my HTML is like so:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;span class="child"&gt;added to my parent&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.red-parent .child { background-color: red; }
  </code></pre>
  
  <p>When I try to do <code>$( ".parent" ).addClass("red-parent",2000)</code>, there is no animation on <code>.child</code> - after 2 seconds the color snaps to red.</p>
  
  <p><a href="http://jsfiddle.net/tobek/XMWnW/" rel="nofollow">jsFiddle with comparison here</a>.</p>
  
  <p>Any suggestions would be greatly appreciated!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I still can't figure this out, but am able to approximate the effect in compatible browsers using CSS3's transitions:</p>
  
  <pre><code>.child {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  </code></pre>
  
  <p>This means I don't have to worry about jQuery animations - don't have to use jQuery UI at all. <code>addClass()</code> 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).</p>