javascript - 在当前JS中添加fadeOut

Question

    $(document).ready(function() {
        $(".tabs-menu a").click(function(event) {
            event.preventDefault();
            $(this).parent().addClass("current");
            $(this).parent().siblings().removeClass("current");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn(1200);

        });
    });

这是用于包含内容的选项卡式菜单(当然使用 jQuery)。

当我打开新选项卡时，当前内容很快淡出，但新选项卡内容打开缓慢(如图所示 1200)。

那么，如何编辑现有脚本以缓慢淡出内容？

示例 http://jsfiddle.net/2uts2kdt/7/

Answer 1

http://jsfiddle.net/2uts2kdt/9/

查看上面更新的 JSFiddle。基本上你想在淡出完成后调用淡入。您需要使用promise().done()，因为在多个元素上调用fadeOut。因此，一旦全部完成，它将调用完成代码。

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).fadeOut(1200).promise().done(function() {
            $(tab).fadeIn(1200);
        });        
    });
});