背景图像不被jquery移动答案

【问题标题】：Background image not moving by jquery背景图像不被jquery移动
【发布时间】：2013-06-06 22:06:23
【问题描述】：

我正在尝试通过 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 css

【解决方案1】：

jQuery 不对backgroundPosition 进行动画处理，因为它通常需要两个值，而 jQuery 只理解可以递增的常规数值。

这里有一个为背景 X 和 Y 位置设置动画的解决方案：
JQuery Animate Background Image on Y-axis

【讨论】：

是的，如果您修改背景大小，动画也将开始工作。
您能否在 jsfiddle 上检查您的解决方案并告诉我它是否有效。谢谢。

【解决方案2】：

你可以移动整个 div。

Working Example

$(document).ready(function () {
    $("#theButton").click(function () {
        $(".contentBlueScreen").animate({
            left: "200%"
        }, 1500).animate({
            left: 0
        }, 1500);
    });
});

CSS

.blueScreen {
    background:url(http://s21.postimg.org/quy8jsc0n/blue_Screen.png);
    background-size:100% 100%;
    width:100%;
    height:100%;
    overflow:hidden;
}
.contentBlueScreen {
    position:relative;
    display:inline-block;
    color:white;
    width:400%;
    height:100%;
}
img {
   float:left;
    list-style:none;
    position:relative;
    width:25%;
    height:500px;
    position:relative;

}

HTML

<div class="blueScreen">
    <button id="theButton">MOve it</button>
    <div class="contentBlueScreen">
        <img src="http://i.imgur.com/a5m0HGp.png"/>
        <img src="http://i.imgur.com/a5m0HGp.png"/>
        <img src="http://i.imgur.com/a5m0HGp.png"/>
        <img src="http://i.imgur.com/a5m0HGp.png"/>
    </div>
</div>

【讨论】：