Jquery animate causing background image to flicker
<p>I am using the jquery .animate function to create a simple accordion, the navigation is in the form of tabs each containing a background image. The accordion works fine except that as it animates the tab images disappear and reappear again. Here is the link:</p>

<p><a href="http://www.piersrueb.com/newsite_tabs/" rel="nofollow">http://www.piersrueb.com/newsite_tabs/</a></p>

<p>Here is the js:</p>

<pre><code>$(document).ready(function(){

$('.tab-1').toggle(function() {
            $('.section-1').animate({width: 800});
            $('.section-2').animate({width: 60});
      }, function() {
            $('.section-1').animate({width: 30});
      });

$('.tab-2').toggle(function() {
            $('.section-2').animate({width: 800});
            $('.section-1').animate({width: 30});
      }, function() {
            $('.section-2').animate({width: 60});
      });

});
</code></pre>
