Question

$(document).ready(function() {
	
	$(window).scroll(function() {
		//alert("Window scroll event detected.");
      
		if ($(".image-container").visible(true)) {
			//alert("if ($(\".image-container\").visible(true))");
			$(".image-container").animate({background-position:center 100%}, 300);
		}
      
	});
	
});

body {
	margin:0;
}

.p-wrapper {
	height:130vh;
	background-color:wheat;
	color:coral;
	overflow:hidden;
}

.image-container {
	height:200px;
	background-image:url(http://www.galleonnews.com/wp-content/uploads/2015/02/creative-mind-brain-wallpaper-870x489.jpg);
	background-size:100% auto;
	background-position:center 0%;
	color:transparent;
}

.another-p-wrapper {
	background-color:pink;
	color:green;
	overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>


<div class="p-wrapper"><p>I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.I am a paragraph.</p></div>
	
	<div class="image-container">.</div>
	
	
	<div class="another-p-wrapper"><p>I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. I am a another paragraph. </p></div>

OR

JSFiddle here.

在此SSCCE中，如果取消选中第二个注释并重新加载，则可以看到jQuery插件正常工作，即ASA .image-container的任何部分变为可见，if ($(".image-container").visible(true))返回{ {1}}

所以问题在于声明：true。这没有做任何事情。问题是为什么？

我想要的效果是，当窗口向下滚动时，背景图像应该从$(".image-container").animate({background-position:center 100%}, 300);动态background-position到center 0%。这样，当用户滚动窗口时，用户可以将较大的图像集视为较小div（高度）的背景。

Answer 1

您需要为每个背景位置设置动画，例如：

background-position-x, background-position-y

像这样：

  $(".image-container").animate({
    'background-position-x': '100%',
    'background-position-y': '50%'
  }, 300, 'linear');

此外，在您的示例中，此$(".image-container").visible(true)引发了错误..

为什么我的jquery animate（）函数不起作用？

1 个答案: