0

我正在处理的网站有一个横幅/底部条，当用户向下滚动页面时加载它，并在他们向上滚动时再次隐藏。我添加了一些逻辑，以便在浏览器不支持 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'});
4

2 回答 2

2

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);
         }
      }
   });
}
于 2013-08-23T09:12:36.677 回答
-1

ie8现在是一个老浏览器了，所以我想你想要动画你将不得不妥协。我建议删除 ie 上的动画，并在页面使用 ie 特定样式表加载后立即显示横幅

于 2013-08-23T09:15:13.510 回答