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>

当我将不透明度设置为0.4时，有什么想法为什么这在Safari中不起作用？

我在Safari 10.1.2中测试。

Answer 1

这里只是一个建议：为什么不检查对象上是否存在class并定义了bot类。如果你这样做，你可以确保你的班级具有这个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");}

希望这适合你。

滚动淡入/淡出不适用于Safari

1 个答案: