jQuery double animation using the jquery easing plugin

Hi guys,

I want to implement something like this page does: link text

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 got an infinite loop. After the second .aminate it will continue to animate it again and again and again. Non stop.

From stackoverflow

• I think its better to use a toggle effect

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

• $("body").stop(true)

  This will clear all animation Queues on the object.

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