Estoy usando jQuery para fade in/out algunos elementos y cambiar la opacidad de los demás.

  $(function(){

        $('.image').each(function() {
            $(this).hover(
                function() {
                    $(this).stop().animate({ opacity: 0.3 }, 'slow');
                    $(this).siblings().fadeIn('slow');
                },

               function() {
                   $(this).stop().animate({ opacity: 1 }, 'slow');
                   $(this).siblings().fadeOut('slow');
               })
            });
        });

Se puede ver el código completo en http://projects.klavina.com/stackoverflow/01/ (también estoy usando el jQuery de Mampostería plugin en la página).

Soy bastante nuevo en JS/jQuery y el código anterior no funciona bien, a menos que el mouseover .elemento de imagen muy lentamente. Cuando me muevo sobre los elementos más rápido, las leyendas sobre las imágenes muestran que incluso cuando ya he movido sobre otro elemento. ¿Cómo puedo quitar eso? I. e. los subtítulos deben desaparecer en sólo cuando todavía estoy flotando ese elemento en particular.

La primera imagen en el sitio de ejemplo tiene una «z-index: 100;» para el título, así que puedo conseguir la superposición de texto en completa opacidad. Lo ideal sería tener «z-index: 100;» para todos los títulos, pero esto hace que el rondando trabajo aún peor.

Además, el ocultamiento se ve distorsionada en el IE. ¿Cómo puedo arreglar eso? Hice uso de la opacidad cambio en otra página, y corregido el bug de IE mediante la adición de un fondo blanco para el elemento, pero no puedo hacer eso aquí (como tengo una foto debajo).

Gracias!

  • +1 para el uso de la Masonería – sólo he encontrado y no puede pensar en algo mejor :-D, así Como por el uso del mismo, se ve muy bien. Siento no poder ayudarte con tu problema 🙁
  • Isótopo es más fresco. isótopos.metafizzy.co
InformationsquelleAutor klavina | 2011-03-13

3 Comentarios

  1. 4

    La causa de su problema es que se necesita una llamada a .siblings().stop(), además a la $(this).stop() (que ya tiene).

    Después de arreglar eso, vamos a ver un tema nuevo, donde los títulos inicialmente funciona correctamente, pero luego comienzan a desaparecer en sólo parcialmente, una vez que han sido moused-repetidamente (y, eventualmente, van a desaparecer por completo hasta que vuelva a cargar la página). Esto es debido a la forma en que .fadeIn() funciona cuando se combina con .fadeOut()fadeIn() no siempre fade-in para opacity:1 – en su lugar, se desvanece en lo que la opacidad se aplicó en el momento fadeOut() fue llamado anteriormente.

    Para evitar esto, usted puede utilizar animate({opacity:1},'slow') en lugar de fadeIn('slow') — o puede utilizar la más concisa (y clara) .fadeTo('slow',1) (docs). (nota, el orden de los parámetros es diferente en fadeTo, en comparación con las otras funciones de animación – la duración viene primero, luego el valor que desea fundido a).

    Por supuesto, también se podría utilizar fadeTo() en el lugar de la otra opacidad de la animación, aunque ciertamente no hay nada malo con el uso de animate() como han demostrado — las dos son equivalentes. (por supuesto, usted necesita se animate() si desea manipular múltiples propiedades css al mismo tiempo.)

    Cuando todo viene junto, podría ser algo como esto:

    $(function() {
        $('.image').each(function() {
            $(this).hover( function() {
                $(this).stop().fadeTo('slow',0.3)
                    .siblings().stop().fadeTo('slow',1);
            }, function() {
                $(this).stop().fadeTo('slow',1)
                    .siblings().stop().fadeTo('slow',0);
            });
        });
    });

    Se puede ver este código en acción en jsFiddle: http://jsfiddle.net/coltrane/XstpE/

    (nota: este ejemplo depende de la alojado recursos que ir con el original post anterior, así que no va a funcionar si los mueve o se convierten en lo contrario de estar disponible).


    También nota: En el ejemplo anterior, he incluido el uso de .each() como se hizo en el ejemplo original, pero quiero señalar que no es realmente necesario.

    El siguiente es equivalente a (y suele ser considerado «mejor» jQuery técnica):

    $(function() {
        $('.image').hover(function() {
            $(this).stop().fadeTo('slow', 0.3)
                .siblings().stop().fadeTo('slow', 1);
        }, function() {
            $(this).stop().fadeTo('slow', 1)
                .siblings().stop().fadeTo('slow', 0);
        });
    });

    Cuando se aplica un controlador de eventos para un multi-elemento de conjunto, jQuery automáticamente une el mismo controlador de cada elemento en el conjunto. (He actualizado mi ejemplo en jsFiddle (enlazado más arriba) para mostrar el código de sin la each()).


    Editar

    El OP señala que se cierne sobre el título (que se encuentra en la parte superior de la imagen) hace que el mouseleave controlador de accionar, lo que resulta en el despliegue de la acción que se realiza. El comportamiento deseado es tener el título no desencadenar el lanzamiento.

    Este problema se produce porque el título «sombras» de la imagen, y la hover() se aplica a la imagen. Cuando el ratón se desplaza sobre el título ya no está en la imagen (en el título) por lo que el navegador se dispara un mouseleave en la imagen. Esta misma situación puede dar lugar a todo tipo de otros problemas sutiles demasiado, especialmente a medida que añada más contenido complejo.

    Para solucionar esto, te recomiendo que simplemente aplicar hover() un nivel hacia arriba (hacia el recipiente que contiene la imagen y el título), en lugar de aplicarlo a la imagen directamente. En este caso que el contenedor es $('.entry'). El código sería el cambio como este:

    $(function() {
        $('.entry').hover(function() {
            $('.image',this).stop().fadeTo('slow', 0.3)
                .siblings().stop().fadeTo('slow', 1);
        }, function() {
            $('.image',this).stop().fadeTo('slow', 1)
                .siblings().stop().fadeTo('slow', 0);
        });
    });

    aquí está una nueva versión de la jsFiddle

    • Gracias por este y la explicación! Funciona a la perfección en Safari/Chrome/Firefox. Por desgracia, no funciona tan bien en IE projects.klavina.com/stackoverflow/01/index-02.html – cuando me mouseover el <div class=»caption»> área; la imagen se desvanece en la opacidad:1 & el texto de la leyenda desapareciera.
    • Eso sucede porque su hover() controlador está en la imagen, no en el título– así que cuando usted hace rodar sobre el título, es decir, los procesos de esto como de «salir» de la imagen. Los otros navegadores hará lo mismo si usted da su título a cualquiera de varios posicionamiento relacionados con atributos css. Hay otros problemas más sutiles que pueden surgir como resultado de esto también-incluso Webkit & FF. La mejor solución (en mi opinión) es poner a su hover() controlador en $('.entry') en lugar de $('.image'). ver actualizado jsFiddle aquí.
  2. 0

    No está seguro de cuánto tiempo ‘lento’ paramater medios en su animar funciones. Trate de ajustar que a ‘rápido’ o, incluso, proporcionar un valor numérico en milisegundos y ver si es de ayuda.

    Para detener la animación en un elemento cuando el ratón deja:

    $('.image').mouseleave(function() {
        $(this).stop();
    });
    • Necesito la animación a ser lenta (slow = 600ms), por lo que el cambio que a un mayor valor no sería de ayuda. Hice todo lo que de todos modos, pero el problema sigue ahí – la animación sigue ocurriendo en una capa anterior, incluso cuando me he mudado a otro. Creo que tengo que cambiar el código de una manera que deja de ejecutar la animación cuando me voy del elemento, pero por desgracia no tengo los conocimientos para hacerlo.
    • Si usted desea para tratar de detener la animación en un elemento cuando el ratón sale de ella, por favor consulte editar mi respuesta.
  3. 0

    Trate de usar mouseenter() y mouseleave() en lugar de hover().

    $(function(){
        $('.image').each(function() {
            $(this).mouseenter( function() {
                $(this).stop().animate({ opacity: 0.3 }, 'slow');
                $(this).siblings().fadeIn('slow');
            })
            .mouseleave( function() {
                $(this).stop().animate({ opacity: 1 }, 'slow');
                $(this).siblings().fadeOut('slow');
            });
        });
    });
    • hover() une mouseenter y mouseleave (ver docs). Unión de los eventos directamente debe hacer ninguna diferencia en absoluto.

Dejar respuesta

Please enter your comment!
Please enter your name here