jQuery flotar:desvanecerse en un div oculto mientras se desvanece el "predeterminado"

Question

Tengo dos divs (uno de ellos oculto con CSS), que aparezco y desaparezco alternativamente dentro de un espacio común, al pasar el mouse.

Este es el marcado:

<div id="wrap">

    <div class="image">
        <img src="http://domain.com/images/image.png">
    </div>

    <div class="text hide">
        <p>Text text text</p>
    </div>

</div>

Y estaba aplicando este código jQuery para desvanecer la imagen y desvanecer el texto al pasar el mouse:

<script type="text/javascript">
$(function(){
$('#wrap').hover(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        },
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

Pero el problema es que el texto div se vuelve pegajoso y no se desvanece, siempre que el movimiento del mouse sea demasiado rápido.

¿Sabes dónde puede estar la solución a esto?

Configuré una prueba en línea: http://paragraphe.org/stickytext/test.html

Gracias por cualquier consejo

Answer 1

Si su envoltura no tiene una anchura y altura en ella puede obtener algunos resultados extraños, ya que se reduce una vez que se elimina el elemento de imagen. Para ver, añadir un borde y la altura / anchura fija alrededor de la envoltura. O al menos usar la misma altura de los divs de imagen y texto.

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

EDITED

Se ha quitado un ejemplo de código que no era aplicable a lo que estamos tratando de lograr.

Answer 2

trate de usar .Stop () en la función de su vuelo estacionario de salida, lo que evitará la carrera-condición en la que se mueve rápidamente el ratón sobre los divs

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').stop().fadeOut(100, function(){
               $('#wrap.image').stop().fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 3

Trate de usar la cola:

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

La cola de jQuery es por elemento, por lo que lo que estoy tratando de hacer aquí es poner en marcha los efectos de texto bajo la cola de la imagen.

Y te voy a dar otra sugerencia. Si su intención es aplicar este efecto a varias imágenes usan clase en lugar de ID.

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

De esta manera sólo necesita llamar a esto una vez.

Answer 4

Su código nunca se desvanece a cabo el div texto. Ambas funciones del evento activable se desvanecerán la imagen y se desvanecen en el texto.

Answer 5

Usted tiene el mismo código en ambas funciones hover. ¿No debería reemplazar a los selectores en el segundo caso?

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 6

Gracias por todos los consejos:

He intentado utilizar los eventos / MouseLeave MouseEnter, ya que parecen mirar en detalle para los divs que están tratando con ( como se ve aquí ), pero nada cambió. Así que viendo que todas las instrucciones habituales jQuery no estaban respondiendo He comprobado a cabo como se sugiere mi CSS.

Y allí estaba el truco.

Lo que tenía:

.text p{position:relative; top:-370px; padding: 0 10px}

fue la creación de un gran espacio, vacío que el navegador se interpreta como "no se deja todavía" por el cursor (Noté que sobrevuelen el espacio vacío que estaba haciendo el texto para responder adecuadamente).

Así que he cambiado a lo siguiente:

.text {margin-top:-370px; padding: 0 10px; float:left}

Lo que permite la etiqueta "p" por sí solo, y posiciona el segundo bloque en el div, pero sin rastro de espacio vacío detrás de él.

A continuación, en relación con el fragmento, que funcionará tan bien con MouseEnter / moseleave y vuelo estacionario

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

Esta es la versión mejorada http://paragraphe.org/nice/test.html