如何使用.load和.fadeIn更改DIV内容？

Question

我想要通过以下方式改变一个 Div 元素的内容：

$('#content').click(function() {
    $('#content').fadeOut().load('about.php').fadeIn('normal');
});

然而它总是闪烁，并且我不知道如何解决，因为我对jQuery有点缺乏经验。

我在这里看到了相同的问题，并尝试了所提供的答案，但都无济于事。

- vvhat

Answer 1

你应该使用 .fadeOut() 和 .load() 函数的回调函数。目前你在同时进行淡出、添加 HTML 和淡入操作。 尝试：

//add event handler to click event for the #content element
$('#content').click(function() {

    //cache this element
    var $this = $(this);

    //fadeOut the element
    $this.fadeOut(function () {

        //after fadeOut is done, change it's HTML
        $this.load('about.php', function () {

            //now fadeIn the new HTML, this is in the callback for the `.load()`
            //function because `.load()` is an asynchronous function
            $this.fadeIn();
        });
    });
});

我将所有的callback函数嵌套起来，这样每个过程都可以在下一个运行之前完成。首先允许.fadeOut()完成，然后允许.load()获取数据并将其放置在DOM中，最后我们使用新HTML淡入元素。

- Jasper

Answer 2

你可以像这样做：

你可以这样做：

$('#content').click(function(){
  $('#content').fadeOut(function(){
     $('#content').load('about.php').fadeIn('normal');
  });
});

将 load 作为 fadeOut 的 callback 使用。

- Mr_Nizzle