jquery hover imagen de fundido de intercambio

He estado buscando en línea por un tiempo, tratando de encontrar la mejor manera de escribir un script jquery que hace esta sencilla tarea: el intercambio de una imagen en hover con un elegante efecto de fundido. He encontrado muchas soluciones (de alguna manera incómodo y torpe), y se redujo a lo que yo veo como los dos mejores:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Para mis propósitos, quiero ser capaz de hacer esto pase de intercambio numerosas veces en una página. La página es http://www.vitaminjdesign.com. Actualmente tengo cierne sobre mi “servicios de navegación” (diferente tipo de pase) pero quiero aplicar a todos los botones nav, así como los iconos sociales en el pie de página. Todos los de la flota será el mismo – dos archivos de imagen, un desvanecimiento en el otro en hover, y volviendo a salir. ¿Cuál es la mejor manera de ir sobre esto? Uno de los enlaces anteriores tal vez?

OriginalEl autor JCHASE11 | 2009-12-07

5 respuestas

  1. 6

    También puede lograr esto mediante una sola imagen de fondo, y perdiéndose en & fuera transparente div. Aquí está un ejemplo rápido, que puede ser extendida para trabajar de forma automática para una sola clase de imagen:

    $(document).ready( function() {
        $("#mask-div")
            .css({
              "position": "absolute",
              "width": 275,
              "height": 110,
              "background": "rgba(255, 255, 255, 0.5)"
            })
            .mouseover( function() {
                 $(this).fadeOut("slow");
            })
        ;
        $("#test-img").mouseout( function() {
            $("#mask-div").fadeIn("slow");
        });
    });

    Ejecución de demostración se puede ver en jsbin: demo de uno

    ACTUALIZACIÓN: Aquí es una solución más genérica (incompleta, pero muestra algunas de las ideas): demo-dos . Sólo añadir la clase “fade-img” a cualquier imagen que usted desea tener este efecto.

    $(document).ready( function() { 
        $(".fade-img") 
            .before("<div class='fade-div'></div>") 
            .each( function() { 
                var img = $(this); 
                var prev = img.prev(); 
                var pos = img.offset(); 
    
                prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                    .mouseover( function() { 
                        $(this).fadeOut("slow"); 
                    } 
                ); 
            }) 
            .mouseout( function() { 
                $(this).prev().fadeIn("slow"); 
            }) 
        ; 
    });

    OriginalEl autor jthompson

  2. 4

    Me optar por la solución en el segundo enlace que has facilitado. Es corto, limpio y sencillo.

    • Crear dos <img> etiquetas
    • Posición de uno exactamente encima de la otra (CSS con z-index)
    • En hover fundido de la opacidad de la imagen con mayor z-index a 0
    • Esto hace que sea transparente y se vea la imagen subyacente
    • Cuando pase los extremos de fundido de opacidad para 1 de nuevo.

    Hecho

    lo probé y no funcionó por varias imágenes. Porque están posicionadas de forma absoluta, no puedo separar las imágenes. Todos ellos estaba en la parte superior de uno al otro. He intentado, pero no podía figura de este método para mi uso.
    Funciona si pones otro recipiente alrededor de ellos y definir su tamaño

    OriginalEl autor jitter

  3. 1

    dentro de $(document).ready()

    $('.imgbuttonclass').hover(function(){
        $(this).animate({
            backgroundImage: 'img2.png'
        },500);
    },function(){
        $(this).stop(true).animate({
            backgroundImage: 'img1.png'
        },500);
    });

    editar

    si sólo desea hacer esto: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

    a continuación, utilizar jthompson la respuesta o, simplemente, utilizar el código de la página. si desea utilizar dos imágenes separadas, puede que desee echar un vistazo a esto:

    http://peps.ca/blog/easy-image-rollover-script-with-jquery/

    y la demo

    lo que hace es

    Se ve a través del documento por cualquier
    “img” o “entrada” tags con una clase de
    “ro”. En la imagen de sustitución debe ser
    el mismo nombre que la imagen normal pero
    con “_o” al final. Por ejemplo, la
    imagen de rollover “image.gif” será
    “image_o.gif”. Después de encontrar todos los
    etiquetas de imagen, la secuencia de comandos de precarga todos los de
    la transferencia de imágenes y anuncios de la
    “mouseover” y “mouseout” eventos.

    cómo va a funcionar esto para múltiples imágenes? yo no repetir esto cada vez que quisiera?
    Este parece ser mi mejor respuesta aquí dado varias imágenes y el efecto de fundido. La segunda de las soluciones parece mejor porque es compatible con múltiples hover efectos de la imagen, pero que no incluye el fade. Cualquier idea sobre cómo agregar que?

    OriginalEl autor Brandon H

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *