0

所以我有一个页面，当用户单击其中一个导航链接而不是更改页面时，它只是将这些页面中的内容加载到主页上的 div 中。我通过使用 JQuery 和 .load 来做到这一点，并且我尝试过的两个测试都可以与 .load 完美配合。

我现在想看到的是，如果只是一次加载所有内容，我想慢慢淡入以产生更多效果，我很好奇我是否可以像 .load 一样这样做。

这是我在 JQUERY 中用于在点击时执行 .load 的代码：

   function loadPage(){

   $('#page').load ('art1.html #content');

    }

然后在 HTML 中调用此函数，如下所示：

   <a href="#" onclick="loadPage();">click me</a>

这工作得很好，但如果它淡入，我会更喜欢它：

我知道我不能只是将 .load 更改为 .FadeIn ，就像本文所写的那样，但我将如何编写 .fadeIn 函数。

page= 我希望将内容加载到的主页上的 Div

content= 写入内容的外部 HTML 文件上的 div

4

3 回答 3

0

实际上，我可以通过将效果应用于包装器 div 来做到这一点......

$('#PageWrapper').fadeIn('slow', function(){
   $('#page').load ('art1.html #content');
});

资源

于 2013-08-23T20:15:36.047 回答
0

此代码将在 1/2 秒内淡入。

function loadPage(){
$('#page').hide().load('art1.html #content', function() {
     $('#page').fadeIn(500);
};

}

于 2013-08-23T20:17:21.747 回答
0

在加载数据之前尝试隐藏 div，然后在加载数据后将其淡入：

function loadPage() {
    var $page = $('#page');
    //if you have other content already in #page
    //and would like it to fade out, use fadeOut()
    //instead of hide()
    $page.hide(function () {
        $page.load('art1.html #content', function () {
            $page.fadeIn();
        });
    })
}

小提琴（忽略正在加载的内容，这是本示例中最简单的操作：）

于 2013-08-23T20:14:10.067 回答