在 Safari 中滚动时淡入淡出 In/Out

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 并定义机器人 classes。如果这样做，您可以确保您的 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 代码可能会检查 class 是否存在，而不是有一个属性。

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

希望这对你有用。

在 Safari 中滚动时淡入淡出 In/Out

Fade In/Out on Scroll Not Working In Safari

safari

jquery

fadeout

fadein