jQuery animate VERY slow on IE8 - Fix?

Question

the website I am working on has a banner / bottom strip which loads in when a user scrolls down the page, and hides again when they scroll up. I've added some logic so that there is a fail safe for when the browser doesn't support CSS3 transition (IE8-). However, the jQuery failsafe I am using is extremely slow on IE8, I think this is the animate call. Any advice?

         var Detect = (function() {
            var
            //Add CSS properties to test for
                            props = "transition".split(","),
            //Browser prefixes
                            CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
                            d = document.createElement("detect"),
                            test = [],
                            p, pty;
            // test prefixed code
            function TestPrefixes(prop) {
                            var
                                            Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
                                            All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
                            for (var n = 0, np = All.length; n < np; n++) {
                                            if (d.style[All[n]] === "") return true;
                            }
    return false;
            }
            for (p in props) {
                            pty = props[p];
                            test[pty] = TestPrefixes(pty);
            }
            return test;

            }());


if (Detect.transition) {
        $(function(){
$(window).scroll(function() {  
if($(document).scrollTop() > 250)
{    
$('#carriage-promo').addClass("show");
}
else
{
$('#carriage-promo').removeClass("show");
}
});
})

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

}

    #carriage-promo {
    background: black;
    width: 964px;
    height: 0px;
    position: fixed;
    z-index:300;
    display:none;
    bottom: 0;
    overflow:none;
    text-align: center;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}

#carriage-promo.show {
    height: 40px;
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

if ( vDandT >= 201308190000 && vDandT < 201308220000 ) {
                $('#carriage-promo').html('<img alt="" src="    <venda_entmediaadd>/ebiz/<venda_bsref>/resources/images/promos/NEXT2_soon.gif" />')
                        .css({'display':'inline-block'});

Answer 1

Scroll is fired off not just at the end of scroll but along the way as well. This means you are queing up lots and lots of animations for jQuery to handle when doing a scroll. It may be best to cancel an animation if one is already started or check if an animation is already running before starting another

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

Answer 2

Ie8 is a old browser now, so I think of you want animation you will have to compromise. I would sugest removing the animation on ie, and have the banner visible as soon as the page loads with an ie specific style sheet