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

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

Javascript函数的顺序

3 个答案: