CODEWITHSUNDEEP
jquerycss
Siddharth Sharma
Siddharth Sharma

Reputation: 1711

Background image not moving by jquery

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>

Upvotes: 0

Views: 667

Answers (2)

apaul
apaul

Reputation: 16170

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>

Upvotes: 0

adeneo
adeneo

Reputation: 318252

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

Upvotes: 1

Related Questions