Question

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:

http://www.piersrueb.com/newsite_tabs/

Here is the js:

$(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});
      });

});

Answer 1

Make a parent div of section-1 and tab-1 now on click on tab-1 animate whole parent div. do same for section-2 and tab-2.
I think it might work. as now section and tab are animating separately that’s why it is causing delay