将淡出添加到当前 JS

Add fadeOut to current JS

本文关键字：JS 淡出 添加      更新时间：2023-09-26
    $(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/

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

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

$(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);
        });        
    });
});
如果我

理解正确，那么您想添加一个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);
});
相关文章：