javascript - 使用 jquery easing 插件的 jQuery 双动画

Question

我想实现类似此页面的功能:link

查看答题器框。该框有两个动画正在进行。一个用于easeInQuad，另一个动画用于easeInOutSine。

我怎样才能在我自己的函数中实现类似的东西？

$(function() 
{
    var iH = window.innerHeight + 80;
    var position = $(window).scrollTop();

    $(window).scroll(function() 
    {
        var scroll = $(window).scrollTop();

        if(scroll > position) 
        {
            $("body").animate(
            {
                scrollTop: iH
            },1000,
            "easeInOutQuart")
            .animate(
            {
                scrollTop: parseInt($(window).scrollTop()) - 80
            },1000,
            "easeInOutQuart");
        } 
        else if(scroll < position) 
        {
            $("body").get(0).scrollTop = 0;
        }

        position = $(window).scrollTop();
    });
});

第二个动画效果不太好。但它确实向上滚动。但它向上滚动太多，而不仅仅是 80 像素。它将其滚动到顶部，然后动画进入无限循环。在第二次 .animate 之后，它将继续一次又一次地为其设置动画。不间断。

Answer 1

我认为使用切换效果更好

http://www.sohtanaka.com/web-design/examples/toggle/