title: jQuery animate() doesn't work, but css() does
body: <p>I am creating some sliding panels (accordion) and I want to slide the background image so that a piece of the background is always showing. I am having problems animating the panels, but css works fine. e.g.:</p>
  
  <pre><code>if(slideIndex == index) {
      $this.children('.heading').children().children().fadeIn(settings.slideSpeed);
      $this.children('.heading').animate({height: 250});
  } else {
      $this.children('.heading').children().children().not('.panel-strip').fadeOut(settings.slideSpeed);
      $this.children('.heading').animate({height: 500});
  }
  </code></pre>
  
  <p>Doesn't work, but if I substitute in <code>css</code> instead of <code>animate</code> it works.</p>
  
  <p>The HTML is <code>&lt;div class="panels-background heading"&gt;</code> that I am trying to access.</p>
  
  <p>The javascript is adapted from <a href="http://nicolahibbert.com/demo/liteAccordion/" rel="nofollow">liteAccordion</a>.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/beaverusiv/GGd38/4/" rel="nofollow">http://jsfiddle.net/beaverusiv/GGd38/4/</a> search for 'CODE' in the javascript for the pertinent area.</p>