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

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

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

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

我在这里看了同样的问题,我尝试了所选择的答案,但无济于事.

解决方法

您应该使用.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();
        });
    });
});

我嵌套所有回调函数的原因是每个进程都可以在下一个进程运行之前完成.首先允许.fadeOut()完成,然后允许.load()获取数据并将其放在DOM中,然后我们.fadeIn()使用新的HTML元素.