Question

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

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

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

   function loadPage(){

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

    }

然后在HTML中调用此函数作为Follows：

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

这完全没问题，但如果它渐渐消失了我会更喜欢它：

我知道我不能只将.load更改为.fadeIn，就像写入的方式一样，但是如何编写.fadeIn函数。

page =我想要加载内容的主页上的Div

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

Answer 1

在将数据加载到div之前尝试隐藏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();
        });
    })
}

Fiddle（忽略正在加载的内容，这是本例中最简单的事情：）

Answer 2

实际上，我可以通过将效果应用于包装div来实现...

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

source

Answer 3

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

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

}

Fadein使用JQUERY点击外部html文件

3 个答案: