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