javascript - 背景图像不会淡入

Question

我试图让这个背景图像在用户滚动到它的中间后淡入 div 中。现在，背景图像出现，但不会淡入。这是一个 fiddle :http://jsfiddle.net/8eudrmcx/

HTML

div {
  background-color: #000;
  height: 500px;
  width: 500px;
}

JS

function isScrolledIntoView($elem) {
   var docViewTop = $(window).scrollTop();
   var docViewBottom = docViewTop + $(window).height();

   var elemTop = $elem.offset().top;
   var elemMiddle = elemTop + $elem.height()/2;
   return docViewBottom >= elemMiddle && docViewTop <= elemMiddle;
}
$(window).scroll(function(){
   $elem = $("div"); //or what element you like
   if(isScrolledIntoView($elem)){
      $elem.css('background-image','url("img/background.jpg")').fadeIn();
   }
});

Answer 1

所以你的代码是在 div 中淡入淡出，而不是在背景图像中淡入淡出。 div 可见。

http://jsfiddle.net/8eudrmcx/1/

http://jsfiddle.net/8eudrmcx/2/

将div设置为display: none，它将淡入。您也可以在css中设置bg图像。