Change background position with jQuery

Question

I'd like to change the background position of a CSS-class while hovering a li-element.

HTML:

<div id="carousel">
    <ul id="submenu">
        <li>Apple</li>
        <li>Orange</li>
    </ul>
</div>

CSS:

#carousel { 
    float: left;
    width: 960px;
    height: 360px;
    background: url(../images/carousel.png);
}

Any suggestions on how to do this?

Missi

Answer 1

Here you go:

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position', '10px 10px');
    }, function(){
        $('#carousel').css('background-position', '');
    });
});

Athirst

What is a valid value of newValue? Is it a string? What format is it in? – Sacrament

He is changing the 'css property backgroundPosition', more details here: w3schools.com/css/pr_background-position.asp – Merits

@Neil Updated Jakub's URL for w3schools background-position: http://www.w3schools.com/cssref/pr_background-position.asp. That explains what valid values of newValue could be. – Curule

Typically it's a string like this: 5px 10px where the first value is left offset then the second is top offset. %, em etc are all fine as well as px. Don't forget that since it pushes the image in the container left and down, you want negative values unless you want the image to wrap around to the other side. – Reorder

Answer 2

You guys are complicating things. You can simple do this from CSS.

#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }

Loincloth

@meo I am so tempted to say "Who cares?" but Argh. IE6. – Appaloosa

IE6 is finally dead, even MS don't care about it – Bushhammer

Everyone knows that IE6 is satan incarnate. Anyone still using IE6 is either a companion to evil or a government employee. – Seibel

Answer 3

rebellion's answer above won't actually work, because to CSS, 'background-position' is actually shorthand for 'background-position-x' and 'background-position-y' so the correct version of his code would be:

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position-x', newValueX);
        $('#carousel').css('background-position-y', newValue);
    }, function(){
        $('#carousel').css('background-position-x', oldValueX);
        $('#carousel').css('background-position-y', oldValueY);
    });
});

It took about 4 hours of banging my head against it to come to that aggravating realization.

Width

That works in some browsers, but not Firefox: background-position-x is not standard css and is not supoprted in all browsers - e.g. Firefox just ignores it even in jQuery v2, see this demo – Reorder

Here's something similar that does adjust either x or y cross browser – Reorder

Answer 4

$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});

Headwaiter

Actually incomplete. Doesn't reset backgroundPostion when hovering stops. As it doesn't do that, also doesn't consider that there already might be meaningful value set for backgroundPosition which needs to be restored – Capability

Well thats all he asked for Jitter. – Headwaiter

No. Reread question: "while hovering a li-element." Which to me implies "I want it reset when hovering stops" – Capability

No it doesn't jitter. If it said "while hovering a li-element. Then I want it reset when hovering stops" Then it would imply what you meant. Sorry to be so petty, however that comment you left months ago really pissed me off. – Headwaiter

Answer 5

Sets new value for backgroundPosition on the carousel div when a li in the submenu div is hovered. Removes the backgroundPosition when hovering ends and resets backgroundPosition to old value.

$('#submenu li').hover(function() {
    if ($('#carousel').data('oldbackgroundPosition')==undefined) {
        $('#carousel').data('oldbackgroundPosition', $('#carousel').css('backgroundPosition'));
    }
    $('#carousel').css('backgroundPosition', [enternewvaluehere]);
},
function() {
    var reset = '';
    if ($('#carousel').data('oldbackgroundPosition') != undefined) {
        reset = $('#carousel').data('oldbackgroundPosition');
        $('#carousel').removeData('oldbackgroundPosition');
    }
    $('#carousel').css('backgroundPosition', reset);
});

Capability