javascript - Javascript函数的顺序

Question

我在使用 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);
   });
});

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

我猜您想在文章列表中保留点击功能，并且只有具有 scrollup 类的元素才具有 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);
    }
});