3

我希望 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/

4

1 回答 1

2

你没有得到“交叉淡入淡出”效果的原因是这段代码：

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

您已将对toggleContent()函数的调用放在完成时调用的回调中.toggle()- 因此在前一个淡出完成之前不会发生淡入。将其移出回调，它不会等待完成，从而允许动画同时发生：

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

另外，我假设“交叉淡入淡出”意味着元素应该同时出现在同一个地方，所以你需要给它们position:absolute样式：

#top_content div { position : absolute; }

鉴于您正在谈论交叉淡入淡出，您可能希望替换.toggle()为fadeToggle()演示的此更新中所示（我还使用了更长的延迟，因此淡入淡出更明显）：http: //jsfiddle.net/ FJ8DV/1/

于 2012-06-24T08:45:39.593 回答