Javascript函数的顺序

Sequential order of Javascript functions

本文关键字：顺序 函数 Javascript      更新时间：2023-09-26

我有一点问题与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);
   });
});

任何帮助将非常感激!

谢谢

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

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

你可以这样写:

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

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

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

$(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);
    });
}
相关文章：