Javascript JQuery ScrollTop出现fadeIn和fadeOut故障
当使用带有fadeIn和fadeOut的animate scrolltop时,我遇到了一个可怕的问题(有点跳跃或闪烁)。我有一个动态加载内容的Div。当用户单击主页上的菜单按钮时,页面应滚动至顶部,然后开始淡出div,然后使用新内容更新div,然后淡入 它一半时间工作正常,但另一半时间出现故障。我试过firefox、chrome和opera,它们都有相同的行为Javascript JQuery ScrollTop出现fadeIn和fadeOut故障,javascript,jquery,html,jquery-animate,Javascript,Jquery,Html,Jquery Animate,当使用带有fadeIn和fadeOut的animate scrolltop时,我遇到了一个可怕的问题(有点跳跃或闪烁)。我有一个动态加载内容的Div。当用户单击主页上的菜单按钮时,页面应滚动至顶部,然后开始淡出div,然后使用新内容更新div,然后淡入 它一半时间工作正常,但另一半时间出现故障。我试过firefox、chrome和opera,它们都有相同的行为 function loadPage(url) { $("html, body").animate({ scrollTop: 0}
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>
尝试将其改为:
function loadPage(url)
{
$("html, body").animate({ scrollTop: 0}, 500, function(){
$('#centerBox').fadeOut(1000, function(){
$('#centerBox').load(url, function(){
$('#centerBox').fadeIn(1500);
});
});
});
}
在淡出动画完成之前,不会加载url 我似乎已经解决了我的问题
$(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()有关吗?谢谢你,但我仍然会遇到奇怪的问题。所以strange@user1577433~z~你可以尝试将fadeIn放入load调用的完整函数中。我刚刚更新了第一篇文章,介绍了如何调用loadPage()函数。这可能与此有关吗?@user1577433~我不这么认为。我认为这更多地与比赛条件有关。您希望在最后一步完成后开始每一步。我要用其他东西更新我的答案,让你试试。仍然不起作用。我认为这与动画scrolltop有关,因为当页面稍微向下滚动时,只要单击a菜单按钮,就会出现此故障,从而导致向上滚动。你知道还有其他方法可以滚动到顶部吗?顺便说一句,非常感谢你的帮助。非常感谢!