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

首先隐藏容器然后在页面加载fadeIn之后隐藏容器。

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

这样可以让你在拥有fadeOut和fadeIn动画的同时尽快检索内容。

如何使用jQuery将一个div加载到另一个div中

2 个答案: