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。基本上你想在fadeOut完成后调用fadeIn。您需要使用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);
        });        
    });
});

Answer 2

如果我理解正确，那么您想要添加fadeOut来电，而不是仅仅将其设为display:none

$(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);
    $(tab).fadeIn(1200);

});

将fadeOut添加到当前的JS

2 个答案: