jQuery fundido a nueva imagen

Question

¿Cómo puedo fundir una imagen en otra con jquery? Por lo que puedo decir, usaría fadeOut, cambiaría la fuente con attr() y luego fadeIn nuevamente. Pero esto no parece funcionar en orden. No quiero usar un complemento porque espero agregar algunas modificaciones.

Gracias.

Answer 1

En el caso más simple, tendrá que utilizar una devolución de llamada de la llamada a fadeOut().

Suponiendo una etiqueta de imagen que ya están en la página:

<img id="image" src="http://sstatic.net/so/img/logo.png" /> 

se pasa una función como argumento de devolución de llamada a fadeOut() que restablece el atributo src y luego se desvanece hacia atrás usando fadeIn():

$("#image").fadeOut(function() { 
    $(this).load(function() { $(this).fadeIn(); }); 
    $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

Para animaciones en jQuery, las devoluciones de llamada se ejecutan una vez completada la animación. Esto le da la capacidad de encadenar animaciones secuencialmente. Tenga en cuenta la llamada al load(). Esto asegura que la imagen se cargue antes de volver a fundirse (Gracias a Y. Shoham).

Here's a working example

Answer 2

¿Estás seguro de que estás utilizando callback pasas a fadeOut para cambiar la fuente attr y luego llamar al fadeIn? No puede llamar al fadeOut, attr() y fadeIn secuencialmente. Debe esperar a que fadeOut para completar ...

Answer 3

Bueno, se puede colocar la siguiente imagen detrás de la actual, y fadeOut la actual por lo que parece que como si se está desvaneciendo en la siguiente imagen.

Cuando se realiza el desvanecimiento, se intercambian las imágenes. Así que más o menos:

<style type="text/css"> 

.swappers{ 
    position:absolute; 
    width:500px; 
    height:500px; 
} 

#currentimg{ 
    z-index:999; 
} 

</style> 

<div> 
    <img src="" alt="" id="currentimg" class="swappers"> 
    <img src="" alt="" id="nextimg" class="swappers"> 
</div> 

<script type="text/javascript"> 
    function swap(newimg){ 
     $('#nextimg').attr('src',newimg); 
     $('#currentimg').fadeOut(
      'normal', 
      function(){ 
       $(this).attr('src', $('#nextimg').attr('src')).fadeIn(); 
      } 
     ); 
    } 
</script> 

Answer 4

$("#main_image").fadeOut("slow",function(){ 
    $("#main_image").load(function() { //avoiding blinking, wait until loaded 
     $("#main_image").fadeIn(); 
    }); 
    $("#main_image").attr("src","..."); 
}); 

Answer 5

Para aquellos que quieren la imagen a escala de acuerdo a porcentaje de ancho de (que escala de acuerdo a su tamaño del navegador), es obvio que no desea establecer la altura y la anchura en pixels en CSS.

Esta no es la mejor manera, pero no quiero usar ninguno de los complementos de JS.

¿Qué puede usted hacer es:

1. Crear uno mismo tamaño PNG transparente y poner un ID a ella como segunda bandera
2. Nombre de la imagen original como primera bandera
3. pusieron a los dos bajo un DIV

Aquí es la estructura CSS para usted de referencia r:

.design-banner { 
    position: relative; 
    width: 100%; 
    #first-banner { 
     position: absolute; 
     width: 100%; 
    } 
    #second-banner { 
     position: relative; 
     width: 100%; 
    } 
} 

A continuación, puede desaparecer de forma segura fuera de su bandera original sin el contenido que puso después de la imagen en movimiento y el parpadeo de arriba abajo

Answer 6

vieja pregunta, pero pensé en tirar de una respuesta . Lo uso para la imagen de encabezado grande en una página de inicio. Funciona bien al manipular el índice z para las imágenes actuales y siguientes, muestra la siguiente imagen justo debajo de la actual, y luego desvanece la actual.

CSS:

#jumbo-image-wrapper 
{ 
    width: 100%; 
    height: 650px; 
    position: relative; 
} 

.jumbo-image 
{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

HTML:

<div id="jumbo-image-wrapper"> 
    <div class="jumbo-image" style="background-image: url('img/your-image.jpg');"> 
    </div> 
    <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;"> 
    </div> 
</div> 

Javascript (jQuery):

function jumboScroll() 
{ 
    var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length; 

    var next_index = jumbo_index+1; 
    if (next_index == num_images) 
    { 
     next_index = 0; 
    } 

    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show(); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow"); 

    jumbo_index = next_index; 

    setTimeout(function(){ 
     jumboScroll(); 
    }, 7000); 
} 

Se trabajará sin mate ¿Cuántas "diapositivas" con la clase .jumbo-image se encuentran en la div # jumbo-image-wrapper?