Question

我希望top_content函数与#test和＃test1交叉淡入淡出。现在div #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');
    });
});

http://jsfiddle.net/FJ8DV/

Answer 1

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

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

您已在toggleContent()完成的回调中将.toggle()函数调用到您的$('.current').toggle(400); toggleContent($top_content);函数中，因此淡入不会发生，直到之前的淡出已经完成。将其移出回调，它不会等待完成，从而允许动画同时发生：

position:absolute

另外，我认为“交叉渐变”意味着元素应该同时出现在同一个地方，所以你需要给它们#top_content div { position : absolute; }样式：

.toggle()

鉴于您正在谈论交叉淡出色，您可能希望将fadeToggle()替换为{{1}}，如此更新中显示的那样（我也是使用较长的延迟，因此淡入淡出更明显）：http://jsfiddle.net/FJ8DV/1/

交叉淡入淡出动画

1 个答案: