淡入/淡出的滾動不工作在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");} 

希望這對你有效。