jQuery-Hover: Einblenden eines ausgeblendeten Divs, während das Standard-Div ausgeblendet wird
Ich habe zwei divs (eine davon mit CSS versteckt), die ich beim Schweben abwechselnd in einem gemeinsamen Raum ein- und ausblende.
Dies ist das Markup:
<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>
Und ich habe diesen jQuery-Code angewendet, um das Bild auszublenden - und den Text beim Schweben einzublenden:
<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>
Das Problem ist jedoch, dass das Text-Div klebrig wird und nicht ausgeblendet wird - immer, wenn die Mausbewegung zu schnell ist.
Wissen Sie, wo es die Lösung dafür sein kann?
Ich habe einen Online-Test eingerichtet:http://paragraphe.org/stickytext/test.html
Danke für jeden Tipp