title: jQuery css background position change twice
body: <p>I'm basically trying to alter the background-position on a div twice in fairly quick succesion . Heres my current code:</p>
  
  <pre><code>$('.slide1').css({'margin':' 0 0 0 1000px','display':'none'}).delay(2400).show().animate({marginLeft: 0},1000, function(){ 
          $('.accordion').css('background','#000'); 
          $('.shadow-horizontal').css('visibility','visible');
          $('.panel:nth-child(2)').delay(2000).css('background-position','0px top'); //this one doesn't seem to fire
          $('.panel:nth-child(2)').delay(2000).css('background-position','-410px top'); //this one does 
      });
  </code></pre>
  
  <p>Whats happening is only the second change is taking place. The first one doesn't seem to be affected at all.</p>
  
  <p>I'll note that I need to do it using jQuery and ideally I'd prefer to wrap the jquery .css changes in a function and just call that were the current jQuery .css changes are.</p>
  
  <p>I also tried a long string version too that didn't work.</p>
  
  <pre><code>$('.panel:nth-child(1)').css('background-position','0px top').delay(500).css('background-position','-41px top');
  </code></pre>
  
  <p>Here's a live version of where I'm at: <a href="http://faithandsony.co.uk/sony_accordion_hover-hightlight/" rel="nofollow">http://faithandsony.co.uk/sony_accordion_hover-hightlight/</a></p>
  
  <p>Thanks in advance for any answers. I'm around to answer any questions.</p>