Cuando hago clic en un enlace determinado, quiero que la imagen de fondo se desvanezca, cambie a otra imagen y luego se desvanezca.

El código que tengo:

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').css('background-image', 'url('+image+')');
})

Intenté esto:

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')');
})

Pero esto no funcionó, ¿qué estoy haciendo mal? (Soy nuevo en jQuery)

EDITAR:

Resolví esto con la respuesta de Rory McCrossan:

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000', function() {
        $(this).css('background-image', 'url('+image+')').fadeIn('3000');
    });
});

Pero ahora esto se desvanece en un fondo blanco y luego se desvanece en la imagen, dando la sensación de un flash? ¿Hay alguna manera de cargar la imagen antes?

1
Rafael Morais dos Santos 1 sep. 2014 a las 19:33

3 respuestas

La mejor respuesta

Debe encadenar los fundidos llamando al fadeIn después de que el fadeOut se haya completado. Puede hacerlo utilizando el parámetro de la función de devolución de llamada. Prueba esto:

$('.link').on('click',function(){
    var image = $(this).data('image');
    $('#div-with-the-bgimage').fadeOut('3000', function() {
        $(this).css('background-image', 'url('+image+')').fadeIn('3000');
    });
});
4
Rory McCrossan 1 sep. 2014 a las 15:34

¿No sería mucho más simple si agrega / elimina un div con la imagen que desea y no cambia nada en el fondo? Solo un ejemplo:

 <div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div>

Ahora, usando jQuery, puede colocar la imagen en el atributo de datos anterior en la parte superior, con 0 opacidad, desvanecerla y desvanecerla:

 $('.link').on('click',function(){
   var image = $(this).data('image');
   var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>';
   $('#div-with-the-bgimage').append(appendcode);
   $('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() {
     $(this).fadeOut('3000');
   });
});

Utilicé algunos estilos en línea para señalar que debe hacer que el contenedor se coloque en posición relativa y que se agregue en posición absoluta y con un índice z más alto, puede hacerlo mucho más elegante al incluirlos en su CSS, por supuesto.

1
alou 1 sep. 2014 a las 16:00

U puede combinar animate y opacity o usar las funciones fadeOut y fadeIn.

Consulte este enlace jsfiddle para ver un ejemplo de trabajo usando fadeOut y fadeIn.

U también puede especificar una etiqueta img única con el atributo de galería de datos que almacena varias URL para que las imágenes cambien entre todas. Consulte este otro enlace jsfiddle para ver un ejemplo de trabajo. Haga clic en el botón Alternar para cambiar la imagen.

Espero que sea útil!

0
Academia 1 sep. 2014 a las 18:16