我试图让这个背景图像在用户滚动到它的中间后淡入 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();
}
});
最佳答案
所以你的代码是在 div 中淡入淡出,而不是在背景图像中淡入淡出。 div 可见。
http://jsfiddle.net/8eudrmcx/1/
http://jsfiddle.net/8eudrmcx/2/
将div设置为display: none
,它将淡入。您也可以在css中设置bg图像。
关于javascript - 背景图像不会淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26047159/