JQUERY, Creating Panels, that fade IN/Out

Question

I have a DIV on my page that I want to be able to toggle cards/divs to fadeIN & Out of.

The broken code:

$('.toogle-link').live('click', function() {
    var toogleID =  $(this).attr("name");

    $('.carditem').fadeOut( function() {
        // Animation complete show correct card
        $('#' + toogleID).fadeIn();
    });

    return false;

});

Problem is the FadeIn is happening before the fadeOut completes which is causing the cards to stack for a moment which looks horrible versus the current card fading out and the new card fading in. Any ideas?

Answer 1

Depending on the other jQuery used this may happen.

You can manually set the duration, then use a timeout for the fadeIn, calling .hide() and killing the fadeOut effect.

The user Marek commented on the official site about this.

Answer 2

I guess I had the same problem, I solved by hiding it completely before showing the right one

$('.toogle-link').live('click', function() {
    var toogleID =  $(this).attr("name");

    $('.carditem').fadeOut( function() {
        $('.carditem').css("display", "none"); // this do the trick
        // Animation complete show correct card
        $('#' + toogleID).fadeIn();
    });

    return false;

});

I don't know if this is the best solution, but it works fine.

The problem is that the element is not 100% invisible, you have to hide it completely before showing the other one. Maybe a delay before the fadeIn could solve this as well.

Answer 3

It looks like you are forgetting the duration parameter:

.fadeOut( [ duration ], [ callback ] )

Try this:

$('.toogle-link').live('click', function() {
  var toogleID =  $(this).attr("name");

  $('.carditem').fadeOut("slow", function() {
    // Animation complete show correct card
    $('#' + toogleID).fadeIn();
});

return false;

});