滚动上的淡入/淡出在 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>

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

我在 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 代码可能会检查存在的类，而不是有一个 prop。

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

希望这对你有用。