javascript - 在两个视差背景之间切换

Question

我想使用路标在两个视差背景之间切换。在 Chrome 中一切正常，但问题出现在其他浏览器上。

• Firefox:当我在背景图像之间切换时，下一个背景会在网站上的所有其他元素之上显示一秒钟。

• Safari，有很多延迟。

已编辑 现在的工作示例: http://codepen.io/rajjejosefsson/pen/vXVYNL

.background_fill {
    overflow: hidden;
    position: relative;
}

.background_fill:before {
    top: 0;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    content: " ";
    position: fixed;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://www.w3schools.com/css/trolltunga.jpg');
    will-change: transform;
    width: 100%;
    height: 100%;
}

.background-render { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Mobile-Wallpapers-HD-640x400.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    will-change: transform;
    pointer-events: none;
}

Answer 1

我刚刚从 show() 和 hide() 函数中删除了参数，它开始在 FF 和 Safari 中正常工作。

Show和 hide函数不接受这样的论点。 .background_fill 不是有效的持续时间。

生成的 JavaScript:

$(".background_fill").hide();

$(document).ready(function() {

  /* new hidden background */

  $('.js_show_new_bg').waypoint(function(direction) {

    if (direction === "down") {
      $(".background_fill").show();
    } else {
      $(".background_fill").hide();
    }
  }, {
    offset: '1%'
  });

});

您也可以使用 toggle函数来简化你的代码:

$(".background_fill").toggle(direction === "down"); // true = show, false = hide

代替这段代码:

if (direction === "down") {
  $(".background_fill").show();
} else {
  $(".background_fill").hide();
}