背景图片不会淡入

Question

一旦用户滚动到它的中间，我试图让这个背景图像淡入div。现在，背景图像出现，但不会淡入。这是一个小提琴：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图像。