我的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);
    }
});

07-24 09:47
查看更多