Background image not moving by jquery

Question

I am trying to move the background image of a division by means of jquery animation and it is not moving .The image merely shakes when I try to move it . I want to create a slideshow and want the background image to move ,lets say on click ,I want the background image to occupy the full division and then on click it should maintain its size and move towards right or left .Please check the code 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>

That's great, an image of the problem showing us how it doesn't move, just shakes, will surely help us solve this right away ! — adeneo, Jun 06 '13 at 22:07

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

jQuery does not animate backgroundPosition, as it usually takes two values, and jQuery only understands regular numeric values that can be incremented.

There's a solution to animate the background X and Y positions here :
JQuery Animate Background Image on Y-axis

edited May 23 '17 at 11:49

Community

1
1

answered Jun 06 '13 at 22:13

adeneo

312,895
29
395
388

And yes if you modify the background size the animation will also start working . – Siddharth Sharma Jun 06 '13 at 22:23
Can you please check your solution on jsfiddle and tell me if it is working .Thank you . – Siddharth Sharma Jun 07 '13 at 05:13

apaul · Answer 2 · 2013-06-07T03:01:04.603

You could just move the whole div.

Working Example

JS

$(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>

Background image not moving by jquery

2 Answers2