0

For IE8 I use this code which uses jQuery to animate a banner at the bottom of the page when the user scrolls to 250 or more. The problem is that this is extremely slow and has a huge delay, I believe this is because the animate event is firing so many times, I need a callback written in to .stop(); but I'm not sure how/where to put this. Any ideas?

} else {
$(window).scroll(function() {
  if ($(this).scrollTop() < 250) {
     if($("#carriage-promo").not(':animated')){
        $("#carriage-promo").animate({
           height: 0
        },100);

     }
  } else {
     if($("#carriage-promo").not(':animated')){
        $("#carriage-promo").animate({
           height: '40px'
        },100);
     }
  }
});
}
user5623896726
  • 136
  • 1
  • 11

1 Answers1

0

Try this:

$(window).scroll(function() {
  if ($(this).scrollTop() < 250) {
     if($("#carriage-promo").not(':animated')){
        $("#carriage-promo").stop(true,true).animate({
           height: 0
        },100);

     }
  } else {
     if($("#carriage-promo").not(':animated')){
        $("#carriage-promo").stop(true,true).animate({
           height: '40px'
        },100);
     }
  }
});
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • Thanks for the swift reply, trying now! I'm assuming this just stops the animation before firing it again? – user5623896726 Aug 28 '13 at 09:14
  • Correct! and removes pending animations from quee too – Toni Michel Caubet Aug 28 '13 at 09:20
  • This does seem slightly better, and I can't see any queued animations, but it's still nothing like as fast/smooth as the CSS3 version I have for supporting browsers. :/ I can't figure out what could possibly slowing this down. Any more ideas? EDIT: Played around with it a bit, and it's pretty much perfect now! Thanks for your help :) – user5623896726 Aug 28 '13 at 09:24
  • 1
    Ended up using true, false as true,true wasn't allowing the animation to finish before showing the banner. Thanks again! :) – user5623896726 Aug 28 '13 at 10:01