jquery - 如何使用 jQuery 将一个 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 的新手，我不确定如何创建一个变量以将 .fadeIn 和 .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");
    });
});

这将允许您尽可能快地检索内容，同时仍然具有淡出和淡入动画。