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

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

Answer 2

在您对animate() 的调用中，您希望添加一个在完成时调用的函数。 JQuery 提供的 animate 函数将函数作为可选参数。当动画完成时调用该函数。

你可以这样使用：

$('.scrollup').click(function () {
    $("body").animate({
        scrollTop: 0
    }, 'slow', showArticle);
    return false;
});

showArticle 将调用一个函数，该函数会像单击侦听器中的匿名文章一样淡入文章。您可能需要某种方式来传递关于应该显示哪篇文章的参数。

Answer 3

我对此比较陌生，但我认为这可能有效。我要做的是将这些中的每一个都封装为一个可调用函数，然后将一个函数作为回调传递给另一个。

$(document).ready(function () {
scrollTop(showArticle());
});


function scrollTop(callback) {
    $('.scrollup').click(function () {
        $("body").animate({
            scrollTop: 0
        }, 'slow');
        callback;
    });
}

function showArticle() {
    $('.articlelist ul li').click(function () {
        var i = $(this).index();
        $('.fullarticle').fadeTo(500, 0);
        $('#article' + (i + 1)).fadeTo(500, 1);
    });
}