代码之家 › 专栏 › 技术社区 › a1anm

滚动淡入/淡出在Safari中不起作用

fadeout fadein safari jquery

a1anm · 技术社区 · 8 年前

我有以下代码,可以在向下滚动时淡入图像,在向上滚动时淡出图像:

<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 10.1.2中测试。

1 回复 | 直到 8 年前

David Espino 8 年前

这里只是一个建议:为什么不检查 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");}