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()）：http://jsfiddle.net/ FJ8DV/1/fadeToggle()

于 2012-06-24T08:45:39.593 に答える