jQuery fadeIn fadeOut effect issues

Question

I have this jQuery code:

$(document).ready(function () {
    $('a.link').click(function (e) {
        e.preventDefault();
        var olink = $(this).attr('href'); $('.geral_menu').animate({ bottom: "520px" }, 500, function () {
            $('.geral_conteudo').fadeOut('fast', function () {
                $(olink).delay(100).fadeIn('slow');
            });
        });
    });
});

When I click on the menu divs with class geral_menu , the bar containing these divs move up and show the content below. After navigating/clicking around on some of the headings, the content will flash twice instead of fading out and in properly.

You can see the effect in action here .

Answer 1

Try to use .stop() and .promise() like

$(document).ready(function () {
    $('a.link').click(function (e) {
        e.preventDefault();
        var olink = $(this).attr('href');
        $('.geral_menu').stop(true).animate({
            bottom: "520px"
        }, 500, function () {
            $('.geral_conteudo').stop(true).fadeOut('fast').promise().done(function () {
                $(olink).delay(100).fadeIn('slow');
            });
        });
    });
});

Answer 2

Your issue is in this nested function:
$(olink).delay(100).fadeIn('slow');

If you comment that out then it doesn't fade twice.