javascript - jQuery fadeIn fadeOut 效果问题

Question

我有这个 jQuery 代码:

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

当我单击带有 geral_menu 类的菜单 div 时，包含这些 div 的栏会向上移动并显示下面的内容。导航/单击某些标题后，内容将闪烁两次，而不是正确淡出和淡入。

您可以see the effect in action here .

Answer 1

尝试使用 .stop() 和 .promise() 类似

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