¿Cómo agregar un efecto de transición de imagen o desvanecimiento usando JQuery?

Question

Tengo solo un elemento <img> en mi página. Cambio el atributo src de esta imagen cada 7 segundos.

Veo las imágenes nuevas cada 7 segundos, pero sería mejor si puedo agregar algún efecto de transición o desvanecimiento al cargar una nueva imagen.

¿Algunas tienen una secuencia de comandos simple para esto?

No necesito ningún complemento. Solo necesito alguna pista o algunas líneas de muestra para hacerlo.

Answer 1

A pesar de lo mencionado Kaiqing, se puede utilizar la capacidad de las devoluciones de llamada jQuery para fade in/out de la imagen mientras se está cambiando la misma. Esto se puede hacer de esta manera: http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function(){ 
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow'); 
}); 

Answer 2

No puede hacer esto con solo una imagen.

mira esto:

<div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

      <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

      <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

      <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

      <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var i = 0; 
    $('#himg img').each(function(){ 
     if(i == 0) 
     { 
      $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />'); 

     } 
     if(i == 1) 
     { 
      $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />'); 
     } 
     i ++; 

     slide.arr.push($(this).attr('src')); 
    }); 

    setTimeout(function(){ 
     if(slide.arr.length < 2) 
      slide.fade(0); 
     else 
      slide.fade(2); 
    }, 3000); 
}); 

var slide = { 
    arr: Array(), 
    fade: function(i) 
    { 
     $('#main_over').fadeOut("medium"); 
     setTimeout(function(){slide.next(i);}, 1000); 
    }, 
    next: function(i) 
    { 
     $('#main_over').html($('#main_img').html()); 
     $('#main_over').css('display', 'block'); 

     $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />'); 

     i++; 
     if(i >= slide.arr.length) 
      i = 0; 

     setTimeout(function(){slide.fade(i);}, 3000); 
    } 
} 

</script> 

Answer 3

Usted querrá usar dos imágenes:

<img id="backImg" /> 
<img id="frontImg" /> 

Establecer #backImg estar detrás #frontImg así:

#backImg 
{ 
    position: absolute; 
} 

Luego, en su código que se dispara cada 7 segundos, fadeOut la imagen frontal ... esto automáticamente hará su efecto de fundido cruzado porque la imagen de atrás ya está cargada detrás de él. Cuando se realiza el fundido, establecer el origen de la imagen frente al src de la imagen de nuevo, mostrarlo, y pre-cargar la siguiente imagen en la imagen de nuevo:

function transitionImages(preloadImgUrl) 
{ 
    $("#frontImg").fadeOut("slow", function() 
    { 
     $("#frontImg").attr("src", $("#backImg").attr("src")).show(); 
     $("#backImg").attr("src", preloadImgUrl); 
    } 
} 

Todo esto supone que sus imágenes son de tamaño idéntico. Si no, querrás ser un poco más elaborado con el CSS y envolver las imágenes en divs que se desvanecen.