如何使用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"); 
    }); 
}); 

这将让你尽可能快地获取内容同时还具有淡出和淡入动画。