带有淡入和淡出的 JQuery ScrollTop 故障答案

【问题标题】：JQuery ScrollTop glitches with fadeIn and fadeOut带有淡入和淡出的 JQuery ScrollTop 故障
【发布时间】：2013-05-23 15:23:14
【问题描述】：

当我使用带有fadeIn 和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>

【问题讨论】：

标签： javascript jquery html jquery-animate

【解决方案1】：

试着改成这个：

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

在淡出动画完成之前，这不会加载 url。

【讨论】：

谢谢，但我仍然得到奇怪的故障行为。好奇怪
@user1577433 ~ 您可以尝试将fadeIn 放入load 调用的完整函数中。
我刚刚更新了第一篇文章，说明我是如何调用 loadPage() 函数的。这和它有什么关系吗？
@user1577433 ~ 我不这么认为。我认为这更多地与比赛条件有关。您希望在最后一步完成后开始每一步。我会用其他东西来更新我的答案，让你试试。
还是不行。我认为这与动画滚动顶部有关，因为当页面略微向下滚动并且单击菜单按钮时会发生此故障，从而导致向上滚动。您知道滚动到顶部的任何其他方式吗？非常感谢您的帮助。非常感谢！

【解决方案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() 有关吗？

【讨论】：