Question

我希望实现类似此页面的内容：link

查看Clicker框。这个盒子有两个动画正在进行中。一个用于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/

Answer 2

$（ “正文”）。停止（真）

这将清除对象上的所有动画队列。

http://docs.jquery.com/Effects/stop

使用jquery easing插件的jQuery双动画

2 个答案: