使用jQuery缓动插件的jQuery双重动画

Question

I want to implement something like this page does: link

Look at the Clicker box. The box has two animations going on. One for the easeInQuad, then the other animation is for the easeInOutSine.

How can I implement something like that in my own function?

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

The second animate doesn't work quite well. But it does scroll it up. But it scroll it up too much not just 80 pixels. It scroll it up to the top, then the animation gets into an infinite loop. After the second .animate it will continue to animate it again and again and again. Non stop.

Answer 1

I think its better to use a toggle effect

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

Answer 2

$("body").stop(true)

This will clear all animation Queues on the object.

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