Cómo fadein un cambio de imagen con jQuery

Question

Actualmente tengo un sitio que utiliza el plugin jQuery ciclo. El sitio utiliza el plugin para cambiar una imagen de fondo principal. El ciclo plugin también crea una sección de paginación en el código HTML que en mi caso He personalizado a ser un conjunto de imágenes.

Lo que estoy tratando de hacer es cambiar la imagen de buscapersonas, una vez que se activa "página" en particular. He conseguido un cambio de imagen, sino como los usos del sitio bastante suavizar las transiciones a lo largo me gustaría tener un fundido suave de una imagen a la otra, luego de vuelta otra vez.

Se puede ver un ejemplo de esto en el momento aquí: http://pegaso.mammalworld.com/ coloca el cursor sobre la imagen, "galería" se puede ver cómo está funcionando.

Esta es la función que tengo que necesitaré para modificar, en lugar de la fadeout / FadeIn que utiliza jQuery, lo ideal sería un fundido sencilla a la siguiente fuente de imagen y luego se desvanecen de nuevo:

function onAfter() {

    var myclass = $( ".activeSlide" ).find('img').attr('class');
    //alert(myclass);

    switch (myclass) {
        case "image-1":
            $(".image-1").attr("src","/images/image_small_01_off.jpg");            
            $('.image-2').fadeTo('fast', 0.5, function() {
                $(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
            });

        break;
        case "image-2":
            $(".image-2").attr("src","/images/image_small_02_off.jpg");
            $('.image-3').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
            });                
        break;

        case "image-3":
            $(".image-3").attr("src","/images/image_small_03_off.jpg");
            $('.image-4').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-4":
            $(".image-4").attr("src","/images/image_small_04_off.jpg");
            $('.image-5').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-5":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-6":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow',1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        default :
        $(".image-1").attr("src","/images/image_small_01_off.jpg");
        $(".image-2").attr("src","/images/image_small_02_off.jpg");
        $(".image-3").attr("src","/images/image_small_03_off.jpg");
        $(".image-4").attr("src","/images/image_small_04_off.jpg");
        $(".image-5").attr("src","/images/image_small_05_off.jpg");
        $(".image-6").attr("src","/images/image_small_06_off.jpg");
        break;
    }

}

Actualizar

Para ver el efecto en el sitio, sólo se ciernen sobre la galería y ver como cambia la imagen de fondo, cambiando así la imagen a lo largo de buscapersonas. El fundido debe ser lo más suave, ya que es la imagen de fondo ...

para

Ayuda por favor! :)

Answer 1

En el caso de que usted tiene dos imágenes fijas que no es tan difícil.

1. Establecer el envase fondo de la imagen que desea fundido a.

2. Función de jQuery se atenúe la imagen, la exposición de la imagen de fondo.

   $('img').hover(function() {
        $(this).animate({
            opacity: 0
        }, 500);
    }, function() {
        $(this).animate({
            opacity: 1
        }, 500);
    });​
   

3. Beneficio.

violín

http://jsfiddle.net/v6dtE/