que quieren cambiar la imagen de fondo utilizando la animación lento, pero no su trabajo¿Cómo cambio la imagen de fondo usando la animación jQuery?
$('body').stop().animate({background:'url(1.jpg)'},'slow');
¿Hay algo malo con la sintaxis !!
Puede obtener un efecto similar al atenuar la opacidad de la imagen a 0, luego cambiar la imagen de fondo y finalmente volver a fundir la imagen.
Esto requerirá un div, detrás de todo lo demás en su página que es tan ancho como el cuerpo.
<body>
<div id="bg"></div>
...
</body>
Puede que sea tan ancha como la página usando CSS:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Y luego animar a sus propiedades.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
Se puede obtener más de un efecto cruzado, por tener un segundo div fondo en la parte superior de éste, que luego se puede desvanecerse en.
Esto funcionaría, excepto que animaría la opacidad de todo el contenido de 'body' también. No estoy seguro de que eso es lo que OP quiere. – user113716
¡¡eres un genio !! – getaway
@patrick por supuesto, bueno, no hay forma de que sepa (sin un plugin) para animar la opacidad del fondo, así que tal vez se requiera HTML adicional para obtener este efecto. –
De la documentación de jQuery:
propiedades que son no numérico no puede estén animados utilizando la funcionalidad básica jQuery . (Por ejemplo, la anchura, altura, o hacia la izquierda puede ser animado, pero background-color no puede ser.)
Fuente:
No se puede animar la adición/sustitución de una imagen de fondo. La URL está allí o no. No hay estado intermedio.
La manera de lograr esto puede ser agregar onclick una nueva clase con la imagen de fondo pulg. Entonces animar esto? ¿O se desvanece la imagen para revelar una nueva?
me puedes mostrar un ejemplo, estoy tan mierda en esto !! – getaway
http://stackoverflow.com/questions/253689/switching-div-background-image-with-jquery Estoy en el iPhone, así que es difícil. Pero algunas de las respuestas aquí pueden ayudarte. – diagonalbatman
me gustaría utilizar un div de imitación para cubrir el fondo como un elemento fijo y luego animar ese elemento es decir:
<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#bgDiv').toggle(1000); //You can plugin animate function here.
});
</script>
Aquí es cómo lo hice:
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
lo que no funciona? La velocidad o algo de eso? –
¡ahora la imagen no aparece! cuando hago clic en evento de función !! – getaway