title: jquery children are not animating
body: <p>I want to animate only specific children of a  <code>div</code>but if I specify the class nothing is animated. If I specify the parent class it is fine.</p>
  
  <p>check out the jsfiddle: <a href="http://jsfiddle.net/7y5he/19/" rel="nofollow">http://jsfiddle.net/7y5he/19/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;button id="left"&gt;Left&lt;/button&gt;
  &lt;button id="right"&gt;Right&lt;/button&gt;
  &lt;div class="target"&gt;
      &lt;div id="targetDiv1" class="targetchild_no_animate" style="overflow:auto;height:20px;"&gt;AAA&lt;/div&gt;
      &lt;div id="targetDiv2" class="targetchild" style="overflow:auto;height:20px;"&gt;111&lt;/div&gt;
      &lt;div id="targetDiv3" class="targetchild" style="overflow:auto;height:20px;"&gt;22222&lt;/div&gt;
      &lt;div id="targetDiv4" class="targetchild" style="overflow:auto;height:20px;"&gt;33333&lt;/div&gt;
       &lt;/div&gt;
      &lt;div class="tarWidth" style="top:100px;position:relative"&gt;&lt;/div&gt;
  
   var rightCards = 0;
   var leftCards = 0;
  
   $("#left").click(function () {
     leftCards = '-' + $(".targetchild").width() + 'px';
     $(".targetchild").stop().animate({
       'left': leftCards
     });
     $('.tarWidth').text($(".targetchild").width() + 'px');
   });
  
      // Start animation in the opposite direction
   $("#right").click(function () {
     rightCards = '+' + $(".targetchild").width() + 'px';
     $(".targetchild").stop().animate({
       'left': rightCards
     });
     $('.tarWidth').text($(".targetchild").width() + 'px');
   });
  </code></pre>