jQuery Hover: in einem versteckten div Verblassen, während die „default“ ein Ausblenden

Question

Ich habe zwei Divs (eines davon mit CSS versteckt), die ich in und aus in Alternanz in einem gemeinsamen Raum, auf schweben bin Verblassen.

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 war die Anwendung diesen Code jQuery das Bild ausgeblendet - und im Text, auf schweben Verblassen:

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

Aber das Problem ist, dass der Text div wird klebrig und wird nicht verblassen - immer, dass die Mausbewegung zu schnell

.

Sie wissen, wo es kann die Lösung sein?

Ich habe einen Online-Test auf: http://paragraphe.org/stickytext/test.html

Danke für jeden Tipp

Answer 1

Wenn Ihr Wrapper Sie nicht eine Breite und Höhe auf sie haben einige seltsame Ergebnisse erhalten, wie es schrumpft, sobald das Bildelement entfernt wird. eine Grenze und feste Höhe / Breite um die Hülle zu sehen, hinzuzufügen. Oder zumindest verwenden die gleiche Höhe für das Bild und Text divs.

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

EDITED

ein Codebeispiel entfernt, die nicht für das, was Sie erreichen wollen.

Answer 2

versuchen Sie es mit .stop () auf der Hover-out-Funktion, die den Race-Bedingung verhindern, wo Sie schnell Ihre Maus über die divs bewegen

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').stop().fadeOut(100, function(){
               $('#wrap.image').stop().fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 3

Versuchen Sie, die Warteschlange mit:

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

Die jQuery-Warteschlange pro Element ist, so, was ich versuche, hier zu tun ist, um die Texteffekte unter de Bildwarteschlange zu starten.

Und lassen Sie mich Ihnen einen anderen Vorschlag geben. Wenn Ihre Absicht ist es, diesen Effekt zu erzielen, um verschiedene Bilder Klasse statt id verwenden.

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

Auf diese Weise müssen Sie nur einmal nennen.

Answer 4

Ihr Code blendet nie den Text div aus. Beide Funktionen des Hover-Ereignis wird das Bild und verblassen im Text ausgeblendet.

Answer 5

Sie haben den gleichen Code in beiden hover Funktionen. Sollten Sie nicht die Wähler in zweitem Fall ersetzen?

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

Answer 6

Dank für alle Tipps:

Ich habe versucht, die MouseEnter- / mouseleave Ereignisse zu verwenden, da sie für die divs im Detail zu betrachten scheinen sie mit ( wie hier gesehen), aber nichts geändert. So zu sehen, dass alle üblichen Anweisungen jQuery nicht reagierten Ich habe meine CSS wie vorgeschlagen ausgecheckt.

Und da war der Trick.

Was ich hatte:

.text p{position:relative; top:-370px; padding: 0 10px}

war ein großer, leerer Raum einrichten, dass der Browser als interpretierte „noch nicht links“ durch den Cursor (bemerkte ich, dass das Überfliegen dass leerer Raum den Text machte richtig zu reagieren).

So wechselte ich zu, dass:

.text {margin-top:-370px; padding: 0 10px; float:left}

, die den „p“ Tag allein läßt, und positioniert die zweiten Block nach oben in den div, aber ohne eine Spur von leeren Raum dahinter.

Dann über das Snippet, wird es auch mit arbeitet MouseEnter- / moseleave und Hover :

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

Dies ist die verbesserte Version http://paragraphe.org/nice/test.html