淡入/淡出的滚动不工作在Safari

Question

我有下面的代码，消失在你向下滚动的图像和淡化出来，当你向上滚动：

<script> 

jQuery(window).on("load",function() { 
    jQuery(window).scroll(function() { 
    var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight(); 
    jQuery(".lookbook").each(function() { 
     /* Check the location of each desired element */ 
     var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight(); 

     /* If the element is completely within bounds of the window, fade it in */ 
     if (objectTop -500 < windowBottom) { //object comes into view (scrolling down) 
     if (jQuery(this).css("opacity")==0.4) {jQuery(this).fadeTo(1500,1.0);} 
    } else { //object goes out of view (scrolling up) 
     if (jQuery(this).css("opacity")==1.0) {jQuery(this).fadeTo(1500,0.4);} 
     } 
    }); 
    }).scroll(); //invoke scroll-handler on page-load 
}); 
</script> 

<style> 
.lookbook {opacity:0.4;} 
</style> 

这工作得很好，当我测试它在Chrome和Firefox，但不在Safari中。出于某种原因，如果我改变不透明度为0，将在Safari工作，即

<script> 

jQuery(window).on("load",function() { 
    jQuery(window).scroll(function() { 
    var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight(); 
    jQuery(".lookbook").each(function() { 
     /* Check the location of each desired element */ 
     var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight(); 

     /* If the element is completely within bounds of the window, fade it in */ 
     if (objectTop -500 < windowBottom) { //object comes into view (scrolling down) 
     if (jQuery(this).css("opacity")==0) {jQuery(this).fadeTo(1500,1.0);} 
    } else { //object goes out of view (scrolling up) 
     if (jQuery(this).css("opacity")==1.0) {jQuery(this).fadeTo(1500,0);} 
     } 
    }); 
    }).scroll(); //invoke scroll-handler on page-load 
}); 
</script> 

<style> 
.lookbook {opacity:0;} 
</style> 

这是为什么在Safari中无法工作时，我设置不透明度为0.4任何想法？

我在Safari 10.1.2中测试。

Answer 1

只是在这里的建议︰为什么不检查您的对象上存在class和您定义机器人类。如果你这样做，你可以确保你的班级拥有这个opacity道具的跨浏览功能。勾选此https://css-tricks.com/snippets/css/cross-browser-opacity/ ...如果你这样做......你可以有：

.transparent_class { 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=40); 

    /* Netscape */ 
    -moz-opacity: 0.4; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.4; 

    /* Good browsers */ 
    opacity: 0.4; 
} 

.visible_class { 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=100); 

    /* Netscape */ 
    -moz-opacity: 1.0; 

    /* Safari 1.x */ 
    -khtml-opacity: 1.0; 

    /* Good browsers */ 
    opacity: 1.0; 
} 

而且你的JS代码可以检查类存在，而不是有一个道具。

if (jQuery(this).hasClass("transparent_class")) {jQuery(this).addClass("visible_class", 1500).removeClass("transparent_class");} 

希望这对你有效。