jQuery hover: desvaneciéndose en un div oculto mientras desvanece el "predeterminado"
Tengo dos divs (uno de ellos oculto con CSS), en el que estoy entrando y saliendo alternativamente dentro de un espacio común.
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 desvaneciéndolo en el texto, al pasar:
<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 pega y no se desvanece, siempre que el movimiento del mouse es demasiado rápido.
¿Sabes dónde puede ser la solución a esto?
Configuré una prueba en línea:http://paragraphe.org/stickytext/test.html
Gracias por cualquier consejo