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

Antworten auf die Frage(6)

Ihre Antwort auf die Frage