jQuery hover: zanikanie ukrytego div podczas wygaszania „domyślnego”

Mam dwa divy (jeden z nich ukryty za pomocą CSS), które wchodzę i wychodzę na przemian we wspólnej przestrzeni, w dymku.

To jest znacznik:

<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>

I zastosowałem ten kod jQuery, aby rozjaśnić obraz - i zanikając w tekście, po najechaniu:

<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>

Ale problem polega na tym, że div tekstu staje się lepki i nie zanika - zawsze ruch myszy jest zbyt szybki.

Czy wiesz, gdzie to może być rozwiązanie?

Przygotowałem test online:http://paragraphe.org/stickytext/test.html

Dzięki za każdą wskazówkę

questionAnswers(6)

yourAnswerToTheQuestion