jquery - fijo - css background scroll

Cambiar la posición de fondo con jQuery

Question

Me gustaría cambiar la posición de fondo de una clase CSS mientras se mueve 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);
}

¿Alguna sugerencia sobre cómo hacer esto?

Answer 1

Aqui tienes:

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

Answer 2

Establece un nuevo valor para backgroundPosition en el carousel div cuando un lib en el submenu div está suspendido. Quita la posición de backgroundPosition cuando el estacionario finaliza y restablece la posición de backgroundPosition al valor anterior.

$(''#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 3

La respuesta de la rebelión de arriba no funcionará, porque para CSS, ''posición de fondo'' es en realidad una forma abreviada de ''background-position-x'' y ''background-position-y'' para que la versión correcta de su código sea:

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

Me tomó alrededor de 4 horas golpear mi cabeza para llegar a esa comprensión agravante.

Answer 4

Ustedes están complicando las cosas. Usted puede hacer esto desde CSS.

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

Answer 5

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