[jQuery] Re: animate() canceling

In fact, if you find yourself wanting to do a lot of stuff when scrolling
has stopped, you could add an event for it (again, untested):

(function($) {
   var scrollTimeoutID;
   $(window).bind('scroll', function() {
      clearTimeout(scrollTimeoutID);
      scrollTimeoutID = setTimeout(function() {
         $(window).trigger('scrollstop');
      }, 300);
   });
})(jQuery);

$(document).ready(function() {
   var topOffset = 100;
   $("#label").css('top', topOffset + "px");

   $(window).bind('scrollstop', function() {
      $("#label").animate({top: $(document).scrollTop() + topOffset},
"slow", "easein");
   });
});

Hope it helps.

--Erik


On 9/1/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> Approaching the problem a different way, how about only firing the
> animation if scrolling has paused for a moment? Maybe something like
> (untested):
>
> $(document).ready(function() {
>   var scrollTimeoutID;
>   var topOffset = 100;
>   $("#label").css('top', topOffset + "px");
>
>   $(window).bind('scroll', function() {
>     clearTimeout(scrollTimeoutID);
>
>     scrollTimeoutID = setTimeout(function() {
>       $("#label").animate({top: $(document).scrollTop() + topOffset},
> "slow", "easein");
>     }, 300);
>   });
> });
>
> You should probably play around with that 300 to find the optimum
> setting for you.
>
> Hope it helps.
>
> --Erik
>
>
> On 9/1/07, emi polak <[EMAIL PROTECTED]> wrote:
> > no luck heh? :(
> >
> >
> > On 9/1/07, emi polak <[EMAIL PROTECTED]> wrote:
> > > Hi,
> > > I am altering the "top" property of a floating label in a webpage. The
> > "top" adjustement is fired at page scroll, so that the label would
always
> > stay in its place.
> > > Now I would like to animate the label between its oldPosition and
> > newPosition. So I use animate() to set the "top" property, but the
method
> > starts many times during the page scroll, thus creating a very buggy and
> > slow motion.
> > >
> > > So: is there a way to cancel an already started animation, so that
when
> > "scroll", the animation is first canceled and then its fired again?
> > >
> > > Here is what I'm using now:
> > >
> > >     var topOffset = 100;
> > >     $("#label").css('top', topOffset + "px");
> > >
> > >     $(window).bind("scroll", function() {
> > >         var newScrollTop = $(document).scrollTop();
> > >         var newPos = newScrollTop + topOffset;
> > >
> > >         $("#label").animate({
> > >               top: newPos
> > >             }, "slow", "easein");
> > >     });
> > >
> > > Thank you!
> > > emipolak
> > >
> > >
> >
> >
>