Question

我正在尝试使用以下内容更改Div的内容：

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

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

我在这里看了同样的问题，我尝试了所选答案，但没有用。

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中，然后我们.fadeIn()使用新HTML的元素。

Answer 2

您可能会这样做：

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

将load用作callback的{{1}}。

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

2 个答案: