我的Javascript有点问题。我有一个文章标题列表,当您单击标题时,相应的文章显示在右侧(固定在页面顶部)。我有这些文章可以使用Javascript淡入/淡出。我还具有一个功能,当您向下滚动并单击文章标题时,该页面会慢慢滚动回到顶部。
我的问题是,当页面向上滚动并且文章同时更改时,两者上的动画都变得非常不稳定,尤其是在Safari中。有什么方法可以使页面首先滚动到顶部,然后进行文章更改?
我基本上是在问是否有办法让我的Javascript函数一个接一个地发生,而不是同时发生?
这是我的Javascript:
$(document).ready(function () {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
return false;
});
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').fadeTo(500,0);
$('#article' + (i+1)).fadeTo(500,1);
});
});
任何帮助将不胜感激!
谢谢
最佳答案
我猜想您希望将单击功能保留在文章列表中,并且只有具有classrollup的元素才具有2个动画。
$(document).ready(function () {
$('.articlelist ul li').click(function () {
var i = $(this).index();
if ($(this).is(".scrollup")) {
$("body").animate({
scrollTop: 0
}, 'slow', function () {//when animation completes
fadeArticle(i);
});
} else {
fadeArticle(i);
}
});
function fadeArticle(i) {
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
}
});