JQuery ScrollTop的淡入淡出与淡入淡出

Question

当使用带有fadgeIn和fadeOut的动画滚动顶部时，我遇到了这种可怕的故障（某种程度的跳跃或闪烁）。 我有一个Div，它会动态加载内容。 当用户单击主页上的菜单按钮时，页面应滚动到顶部，然后开始淡出div，然后使用其新内容更新div，然后再淡入。

它一半时间工作正常，但另一半故障。 我尝试使用Firefox，Chrome和Opera，它们的行为相同。

function loadPage(url)
{
    $("html, body").animate({ scrollTop: 0}, 500);
    setTimeout(function (){ $('#centerBox').load(url); }, 1000);
    $('#centerBox').fadeOut(1000);
    $('#centerBox').fadeIn(1500);
}

代码说明：因此，单击菜单按钮时将调用上述功能。 主页将滚动到顶部。 div的内容具有计时器，因此在淡入完全完成后会对其内容进行更改，但要在足够的时间内进行更改以准备进行淡入。

我正在使用以下方法调用loadPage（url）函数：

<a href="#" onclick="loadPage('news.html');"><img src="buttons/newsWhite.png"/></a>

Answer 1

尝试将其更改为此：

function loadPage(url)
{
    $("html, body").animate({ scrollTop: 0}, 500, function(){
        $('#centerBox').fadeOut(1000, function(){
            $('#centerBox').load(url, function(){
                $('#centerBox').fadeIn(1500);
            }); 
        });   
    });
}

在fadeOut动画完成之前，不会加载url。

Answer 2

我似乎已经解决了我的问题。

$(document).ready(function(){ 
        $('#news').click(function(){
            $("html, body").animate({ scrollTop: 0}, 500, function(){
                $('#all').fadeOut(1000, function(){
                    $('#centerBox').load('news.html', function(){
                        $('#all').fadeIn(1500);
                    }); 
                });   
            }); 
            return false;
        });
     });

然后，我使用以下命令调用此命令：

 <a href="#" id="news");"><img src="buttons/newsWhite.png" width="130" height="25"/></a>

我是JavaScript和JQuery的新手（您可能会说），您认为它与不使用document.ready（）有关吗？