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
> >
> >
>
>
