jQuery hover: desaparecendo em um div oculto enquanto desvanece o "padrão"
Eu tenho dois divs (um deles escondido com CSS), que eu estou entrando e saindo em alternância dentro de um espaço comum, em foco.
Esta é a marcação:
<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>
E eu estava aplicando este código jQuery para diminuir a imagem - e desaparecendo no texto, em foco:
<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>
Mas o problema é que o texto div fica pegajoso e não desaparece - sempre que o movimento do mouse é muito rápido.
Você sabe onde pode ser a solução para isso?
Eu configurei um teste online:http://paragraphe.org/stickytext/test.html
Obrigado por qualquer dica