Jquery 交叉淡入动画

我希望top#u content函数与#test和#test1交叉淡入淡出。现在divs#test和#test1使用一个简单的切换，但我希望它们同时淡出和淡入

$(document).ready(function () {
    $('#test, #test1').hide();
    $('.home').click(function () {
        var id = $(this).html().toLowerCase();
        var $top_content = $('#' + id + ':not(:visible)');
        if ($('.current').length === 0) {
            toggleContent($top_content);
        } else {
            $('.current').toggle(400, function () {
                toggleContent($top_content);
            });
        }
    });

    function toggleContent(top_content) {
        top_content.toggle(400);
        $('.current').removeClass('current');
        top_content.addClass('current');
    }
    $("a.home").click(function () {
        $('.active').not(this).removeClass('active');
        $(this).toggleClass('active');
    });
});

---

您没有获得“交叉淡入”效果的原因是以下代码：

        $('.current').toggle(400, function () {
            toggleContent($top_content);
        });

您已将对

toggleContent（）

函数的调用放置在完成

.toggle（）

时调用的回调中，因此在上一次淡入完成之前，淡入不会发生。将其移出回调，它将不会等待完成，从而允许动画同时发生：

        $('.current').toggle(400);
        toggleContent($top_content);

此外，我假设“交叉淡入”意味着元素应同时出现在同一位置，因此您需要为它们提供

位置：绝对
样式：

#top_content div { position : absolute; }

鉴于您正在讨论交叉淡入淡出，您可能希望将
.toggle（）
替换为
fadeToggle（）
，如演示的此更新所示（我还使用了更长的延迟，因此淡出更明显）：
欢迎使用。提供小提琴是很棒的（我希望即使是一些长期用户也会这样做）。但是，请把代码也放在问题中。非常感谢。