the website working on has banner / bottom strip loads in when user scrolls down page, , hides again when scroll up. i've added logic there fail safe when browser doesn't support css3 transition (ie8-). however, jquery failsafe using extremely slow on ie8, think animate call. advice?
var detect = (function() { var //add css properties test 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), = (prop + ' ' + cssprefix.join(uprop + ' ') + uprop).split(' '); (var n = 0, np = all.length; n < np; n++) { if (d.style[all[n]] === "") return true; } return false; } (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'});
scroll fired off not @ end of scroll along way well. means queing lots , lots of animations jquery handle when doing scroll. may best cancel animation if 1 started or check if animation 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); } } }); } 