Cambiar la posición de fondo con jQuery

Me gustaría cambiar la posición de fondo de una clase CSS al desplazar un elemento li.Cambiar la posición de fondo con jQuery

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?

Fuente

2009-11-21 Mats

Aquí van:

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

Fuente

2009-11-21 22:31:42

+20

¿Cuál es un valor válido de 'newValue'? ¿Es una cadena? ¿En qué formato está? –

Está cambiando el 'css property backgroundPosition', más detalles aquí: http://www.w3schools.com/css/pr_background-position.asp – Jakub

@Jakub - el enlace es 404 – Neil

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

Fuente

2009-11-21 22:11:45

Actualmente incompleto. No restablece backgroundPostion cuando se detiene. Como no hace eso, tampoco considera que ya puede haber un valor significativo establecido para backgroundPosition que necesita restaurarse – jitter

Bueno, eso es todo lo que pidió Jitter. –

No. Volver a leer la pregunta: "al pasar el elemento li." Lo que para mí implica "Quiero restablecer cuando se detiene el estacionario" – jitter

Conjuntos nuevo valor para backgroundPosition en el carousel div cuando un li en el submenu div se asoma. Quita el backgroundPosition cuando el control deslizante termina y restablece 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); 
});

Fuente

2009-11-21 22:21:08 jitter

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

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

Fuente

2010-04-11 12:10:49

no funciona en IE6. – meo

+15

@meo Estoy tan tentado de decir "¿A quién le importa?" pero Argh. IE6. –

+15

IE6 finalmente ha muerto, incluso a MS no le importa – Neil

de rebelión anterior no funcione de verdad, porque a CSS, 'background-position' es en realidad la abreviatura de 'background-position-x' y 'background-position-y' por lo que la versión correcta de su código sería:

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

tardó aproximadamente 4 horas de golpearse la cabeza contra que llegue a esa realización agravante.

Fuente

2013-04-18 17:20:32 Karen

Eso funciona en algunos navegadores, pero no en Firefox: [background-position-x no es css estándar y no está disponible en todos los navegadores] (http: // stackoverflow.com/questions/9511104/jquery-background-position-x-issue) - p. Firefox simplemente lo ignora incluso en jQuery v2, [ver esta demostración] (http://jsbin.com/ivupuj/2/edit) – user568458

[Aquí hay algo similar que ajusta el navegador x o y cross]] (http: // stackoverflow .com/a/18515087/568458) – user568458

Cambiar la posición de fondo con jQuery

Respuesta

Cuestiones relacionadas