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

Answer 2

您的问题出在这个嵌套函数中：
$(olink).delay(100).fadeIn('slow');

如果你发表评论，那么它不会褪色两次。

jQuery fadeIn fadeOut效果问题

2 个答案: