Question

我正在处理的网站有一个横幅/底部条带，当用户向下滚动页面时加载，并在向上滚动时再次隐藏。我添加了一些逻辑，以便在浏览器不支持CSS3转换（IE8-）时存在故障保护。但是，我使用的jQuery故障保护在IE8上非常慢，我认为这是动画调用。有什么建议？

         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不仅在滚动结束时被发射，而且还在沿途发射。这意味着你正在排队大量的动画，以便jQuery在进行滚动时进行处理。如果已经启动动画，则最好取消动画，或者在开始另一个动画之前检查动画是否已经运行

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现在是一个旧的浏览器，所以我想你想要动画，你将不得不妥协。我会在ie上删除动画，并在页面加载ie特定样式表后立即显示横幅

在IE8上jQuery动画非常慢 - 修复？

2 个答案: