¿Cómo agregar el desvanecimiento o el efecto de transición de la imagen usando jQuery?

Question

Solo tengo uno <img> elemento en mi página. Cambio el src atributo de esta imagen cada 7 segundos.

Veo las nuevas imágenes cada 7 segundos, pero sería más agradable si puedo agregar algo de desvanecimiento o efecto de transiciones al cargar una nueva imagen.

¿Algunos tienen un script simple para esto?

No necesito ningún complemento. Solo necesita una pista o pocas líneas de muestra para hacerlo.

Answer 1

A pesar de lo que Kaiqing mencionó, puede usar la capacidad de devoluciones de llamada de jQuery para desvanecer la imagen mientras la cambia. Esto se puede hacer así: http://www.jsfiddle.net/bradchristie/hskpq/1/

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

Answer 2

Querrá usar dos imágenes:

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

Establecer #backImg estar atrasado #frontImg al igual que:

#backImg
{
    position: absolute;
}

Luego, en su código que se dispara cada 7 segundos, desvanece la imagen delantera ... esto automáticamente hará su efecto de fase cruzada porque la imagen posterior ya está cargada detrás de ella. Cuando se realice el desvanecimiento, establezca la fuente de la imagen delantera en el SRC de la imagen posterior, muéstrelo y practice la siguiente imagen en la imagen posterior:

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 tienen un tamaño idéntico. Si no, querrá ser un poco más elaborado con el CSS y envolver las imágenes en DIV que se desvanecen.

Answer 3

No puedes hacer esto con una sola 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>