背景图像不会淡入

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图像。