Cambia la posizione dello sfondo con jQuery

Question

Vorrei modificare la posizione di sfondo di una classe CSS mentre aleggiava un elemento-li.

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); 
} 

Qualche suggerimento su come fare questo?

Answer 1

Qui si va:

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

Answer 2

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

Answer 3

Imposta nuovo valore per backgroundPosition sul carousel div quando un Li nella submenu div è aleggiava. Rimuove backgroundPosition quando il passaggio del mouse termina e reimposta il valore backgroundPosition al valore precedente.

$('#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); 
}); 

Answer 4

Voi ragazzi sono complicare le cose. Puoi farlo semplicemente da CSS. risposta

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

Answer 5

di ribellione di cui sopra non potrà mai funzionare, perché per i CSS, 'background-position' è in realtà una scorciatoia per 'background-position-x' e 'background-position-y' in modo che la versione corretta del suo codice sarebbe:

$(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); 
    }); 
}); 

Ci sono voluti circa 4 ore di sbattere la testa contro di esso per venire a quella realizzazione aggravanti.