javascript - 背景图像之间的平滑过渡

Question

所以，我制作了这个脚本，其中背景随着页面向下滚动而改变，但我希望每个图像之间都有一个过渡。因此，当您从一张图像滚动到下一张图像时，它会慢慢淡入下一张图像。有点像视差。

JS:

$(document).ready(function() {
  $("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
  $(window).scroll(function() {
    if($(this).scrollTop() > 0) {
     $("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
    }
    if($(this).scrollTop() > 1000) {
      $("body ").css("background-image", "url('http://i.imgur.com/H5QLuD6.jpg')");
    }
    if($(this).scrollTop() > 2000) {
      $("body ").css("background-image", "url('http://i.imgur.com/KzZpgdS.jpg')");
    }
    if($(this).scrollTop() > 3000) {
     $("body ").css("background-image", "url('http://i.imgur.com/UsLLJSx.jpg')");
    }
  });
});

任何解决方案都值得赞赏(:

Answer 1

最简单的解决方案是通过 CSS:

body {
    transition: background-image 0.5s ease-in-out;
}

编辑:我的回答可能有点为时过早，因为这不是跨浏览器解决方案。更好的方法是使用两个具有不同背景图像的 div，并使用 transition: opacity 0.5s; 不过，此解决方案涉及更多的 javascript。