Best way to implement change fadeIn fadeOut Content menu Jquery

Question

Looking the best way to implement a menu with javascript (jQuery), where i can change the content clicking on a menu, using a fade out fadeIn effect, that is in html hidden.

IDEA

Have a menu , when I click want to active the button and the content, and using a fadeOut effect and replace for the content that I clicked. ( Could add the active class for better play with css)

PROBLEMS

The main problem I have is since it have a time to fadeOut and fadeIn the content appear before the other disappearing the other content.

SOLUTION LOOKING

I'm looking the best way to implement :

• The menu, if "href" is the best way to get the content to show

• Solve the main problem of the fade out fade in effect.Special if you're fast clicking between button, it seems to break (I increase a little the time in the example to check it better)

• Add the class "active" in the menu and gallery

The small example to start here

Answer 1

What you need to use is the fadeIn and fadeOut callback property. With this you can order them properly and have them behave the way you want, like so:

$('#button').click(function(){
    $(this).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
              $(this).fadeIn('fast');
              $(this).addClass('active');
         }
    }
}

If you're using the load function to load your content, the above code should prove helpful. If however you're using static content per button, you can also use the .html function to load the content in the button.

You can call the button with a jQuery selector, like i did in the above example or you can use the onclick attribute:

<a onclick="example('one')">Test Button</a>

And then the javascript would be:

function example(id){
     $('#' + id).fadeOut('fast', function(){
         $(this).load('yourcontent.php', function(){
             $(this).fadeIn('fast');
             $(this).addClass('active');
         }
     }
}

UPDATE 3

I updated the above function to do what i think you meant, with the gallery's id as the parameter. This time with the stop function.

$('#menu li').click(function(){
    $('.gallery').queue("fx", []);
    $('.gallery').stop(true, true);
    var which = $('a', this).attr('href'); 
    $('.gallery.active').fadeOut(2000, function(){
        $(this).removeClass('active');
        if($(which).attr('class') != 'active'){
            $(which).fadeIn(2000, function(){
                $(this).addClass('active');
            });
        }
    });
});

Answer 2

if i understand your question correctly, you want to stop there being such a delay when one gallery disappears and another fades in. the easiest way to do this is to hide the currently showing gallery (rather than fadeOut ) and then fadeIn the newly selected gallery. If you change your code javascript to this, you will see the result is a lot smoother.

  $('#menu li').click(function(event){
      event.preventDefault();
      var $this = $(this);
      var href=  $this.find('a').attr('href');
      $(".gallery").hide();
      $(href).fadeIn(1000);  
  });