我正在尝试通过 jquery 动画移动分区的背景图像，但它没有移动。当我尝试移动它时，图像只是摇晃。 我想创建一个幻灯片并希望背景图像移动，比如说点击，我希望背景图像占据整个分区然后点击它应该保持其大小并向右或向左移动。请检查代码here http://jsfiddle.net/sSYKD/1/
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.js"></script>
<style>
.blueScreen {
background:url(http://s21.postimg.org/quy8jsc0n/blue_Screen.png);
background-size:100% 100%;
width:100%;
height:500px;
}
.contentBlueScreen {
display:inline-block;
color:white;
background:url(http://i.imgur.com/a5m0HGp.png);
background-size:100% 100%;
width:100%;
height:500px;
}
</style>
<script>
$(document).ready(function() {
$("#theButton").click(function() {
$(".contentBlueScreen").animate({backgroundPosition:"200%"},3000);
});
});
</script>
</head>
<body>
<div class="blueScreen">
<div class="contentBlueScreen">
<button id="theButton">MOve it</button>
</div>
</div>
</body>
</html>
最佳答案
jQuery 不会为 backgroundPosition 设置动画，因为它通常有两个值，而且 jQuery 只理解可以递增的常规数值。
这里有一个动画背景 X 和 Y 位置的解决方案:
JQuery Animate Background Image on Y-axis
关于jquery - jquery不移动背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16973031/