如何使用jQuery將一個div加載到另一個div

Question

我正在創建一個菜單，點擊多個導航div後，不同的內容將從單獨的HTML頁面加載到主頁面上的單個容器div中。我想加入.fadeIn和.fadeOut，以便內容交叉淡入淡出，而不僅僅是切換。

這是我寫的只是從兩個導航div的內容加載腳本：

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

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

由於我是新來使用jQuery，我不確定如何創建一個變量，以包括。淡入淡出和.fadeOut我目前的工作。

在此先感謝！

Answer 1

首先隱藏容器，然後在頁面加載後淡入其中。

$("#container").hide().load("content.html #div1", function(){ 
    $("#container").fadeIn(5000); 
}); 

Answer 2

遞延對象可以在這方面發揮了關鍵作用：

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"); 
    }); 
}); 

這將讓你儘可能快地獲取內容同時還具有淡出和淡入動畫。