CODEWITHSUNDEEP
javascriptjquerycss
Will
Will

Reputation: 1

jQuery backgroundPosition not accepting multiple values?

I'm trying to animate motion in my body's background image using variables as the coordinates, but it seems like jquery's backgroundPosition only accepts one value. I tried a few things, like backgroundPosition: distance1 + " " + distance2, and backgroundPosition: distance1 + " -50px" (the value I want it to be at the whole time), but even if I set the top value in CSS, it just defaults to using my first value (left) for both. Any help would be appreciated!

function shiftBoxes(distance1, distance2, id){
    activeBtn('pos' + id.substring(4));
    $("#boxMover").animate({
        marginLeft: distance1
    }, 500, function() {});
    $(document.body).animate({
        backgroundPosition: distance2
    }, 500, function() {});
}
//Add one of these for every box
//The distance to move to the next box is always -1804(*("#pos" + n) - 1) pixels
$("#pos1").click(function() {
    shiftBoxes('0', '-1400', '#box1');
});
$("#pos2").click(function() {
    shiftBoxes('-1804', '-1200', '#box2');
});
$("#pos3").click(function() {
    shiftBoxes('-3608', '-1000', '#box3');
});

Upvotes: 0

Views: 263

Answers (2)

Vinicius Santana
Vinicius Santana

Reputation: 4106

The Property backgroundPostion accpets values as:

top left bottom right center left

or

x% Y% where the left top is 0% 0% and the right bottom is 100% 100%

or

xpos ypos where you can use any css units as %, pixels, em, etc.

and last

inherit

To use it you would have some like:

.style.backgroundPosition="center bottom";

or

.style.backgroundPosition = "20% 50%";

I hope this helps. Peace.

Upvotes: 0

Tim Hobbs
Tim Hobbs

Reputation: 2017

I found this example. It looks like you need parens around the values like so:

.animate({backgroundPosition:"(-20px 94px)"}

Upvotes: 1

Related Questions