Jquery FadeTo para mostrar div oculto

quiero efecto como http://www.findawayworld.com/ cuando pasa el mouse sobre cualquier cuadro.

Aquí está mi código:

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);


        });
        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();
        });

        jQuery(".category-image-block div").hide();

El efecto está llegando pero no está dando el efecto adecuado.

Mi div con clase 'category-image-block' contiene una imagen y otro div oculto con class'contenthover'. El div oculto tiene etiquetas p con texto. Usando el código anterior, se produce un parpadeo (durante menos de 1 segundo) cuando paso el mouse sobre la etiqueta p. El efecto no es suave como debería ser. Cualquier sugerencia ?

preguntado el 28 de julio de 12 a las 13:07

¿Por qué lo estás escondiendo así? jQuery(".category-image-block div").hide(); fuera de los eventos de mouse over/out? También publique el html y tal vez el css que va con eso:

Creo que necesitas configurar un violín, ya que eso nos facilitaría mucho ver el problema real. -

Están haciendo ese efecto de la siguiente manera: crea un div con 2 elementos secundarios (img y div que contienen elementos de texto). Luego, colocan en posición absoluta el elemento img y lo colocan primero en la llamada de pedido, luego usan el efecto de desvanecimiento de desplazamiento en el div principal a secundario. Intentaré poner un violín y mostrarte. -

3 Respuestas

Aquí está la forma en que lo resolvería:

http://jsfiddle.net/6WSNq/8/

Tener un div interno, eso es absoluto para el category-image-block hace que este efecto sea más fácil de obtener.

saludos

Respondido 28 Jul 12, 14:07

Haría esto:

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);
});

VIOLÍN

Respondido 28 Jul 12, 14:07

Aquí hay casi un ejemplo exacto de lo que tienen. Como señalé en un comentario anterior, preste mucha atención al css y dónde se encuentra el elemento en el diseño.

TAMBIÉN: desplácese hasta la parte inferior de esta respuesta para obtener una solución CSS pura (ahorrándole tiempo y espacio)

HTML

<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.
        </p>
    </div>
</div>

CO

.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
}
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.child h3 {
    font-size: 1.3em;
    text-align: center;
}
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;
}

jQuery

$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    },
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");
    });
});​

el jsFiddle

SIN EMBARGO

Tenga en cuenta que este efecto exacto podría lograrse COMPLETAMENTE en css, creando así una nota al pie MUCHO más pequeña para su javascript. Intentaré obtener un ejemplo de CSS2 y CSS3 en breve.

SOLUCIÓN CSS PURO

Usé el mismo jsFiddle para esta solución (simplemente no configuré el modificado como base, por lo que lo encontrará en la modificación 22). Entonces, hay una línea de css de excepción como se indica en el css a continuación. También comenté el JavaScript para mostrar que es una solución CSS pura que incluso debería tener cierta compatibilidad con IE.

CSS (*solo cambios*)

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
}
/* End Solution */

el jsFiddle

Respondido 28 Jul 12, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.