0

多数のナビゲーション div をクリックすると、別の HTML ページからメイン ページの単一のコンテナー div にさまざまなコンテンツが読み込まれるメニューを作成しています。.fadeIn と .fadeOut を組み込んで、コンテンツを切り替えるのではなく、クロスフェードさせたいと思います。

以下は、2 つのナビゲーション div からコンテンツをロードするためだけに作成したスクリプトです。

$(function() { 
$(".navIcon1") .click(function(){
    $("#container").load("content.html #div1");

$(".navIcon2") .click(function(){
    $("#container").load("content.html #div2");
});
});
});

jQuery を使用するのは初めてなので、現在作業しているものに .fadeIn と .fadeOut を含めるために変数を作成する方法がわかりません。

前もって感謝します！

4

2 に答える 2

1

最初にコンテナーを非表示にし、次にページの読み込み後にそれをフェードインします。

$("#container").hide().load("content.html #div1", function(){
    $("#container").fadeIn(5000);
});
于 2013-03-20T19:00:04.127 に答える
0

遅延オブジェクトは、ここで重要な役割を果たすことができます。

var req = $.get("content.html");

$("#container").fadeOut("1000",function(){
    req.done(function(html){
        $("#container").html(
            // $.parseHTML prevents a memory leak
            $($.parseHTML(html)).find("#div1").addBack().filter("#div1");
        ).fadeIn("1000");
    });
});

これにより、フェードアウトとフェードインのアニメーションを維持しながら、できるだけ早くコンテンツを取得できます。

于 2013-03-20T19:06:07.453 に答える