jQuery Hover: Fading in einem versteckten div beim Ausblenden der "default" one

Question

Ich habe zwei divs (eine davon mit CSS versteckt), die abwechselnd in einem gemeinsamen Raum ein- und ausgeblendet werden, bei Hover.

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 dieser 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 ausgeblendet - immer, dass die Mausbewegung zu schnell ist.

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

stelle ich einen Online-Test auf: http://paragraphe.org/stickytext/test.html

Danke für jeden Tipp

Answer 1

bewegen Wenn Ihr Wrapper doesn‘ Wenn Sie eine Breite UND Höhe haben, können Sie einige seltsame Ergebnisse erhalten, wenn es verkleinert wird, sobald das Bildelement entfernt wurde. Um zu sehen, fügen Sie einen Rahmen und feste Höhe/Breite um den Wrapper hinzu. Oder verwende mindestens die gleiche Höhe für die Bild- und Textdivs.

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

ein Codebeispiel entfernt EDITED, die nicht anwendbar war, was Sie erreichen wollen.

Answer 2

Ihr Code nie den Text div ausblendet. Beide Funktionen des Hover-Ereignisses blenden das Bild aus und blenden den Text ein.

Answer 3

Sie haben den gleichen Code in beiden Funktionen. Sollten Sie die Selektoren nicht im zweiten 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 4

try .stop() auf Hover-out-Funktion, die die Race-Bedingung verhindern, wo Sie schnell Ihre Maus über die divs

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

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 Sie diesen Effekt auf verschiedene Bilder anwenden möchten, verwenden Sie die Klasse statt der ID.

... 
    $('.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 anrufen.

Answer 6

Dank für alle Tipps:

Ich versuchte, die MouseEnter-/mouseleave Ereignisse zu verwenden, da sie im Detail für die divs zu suchen scheinen sie mit (as seen here) zu tun hat, aber nichts geändert. Da alle üblichen jQuery-Anweisungen nicht reagierten, habe ich wie vorgeschlagen mein CSS überprüft.

Und da war der Trick.

Was ich hatte:

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

war einen riesigen, leeren Raum einrichten, dass der Browser als interpretierte „noch nicht links“ durch die Cursor (bemerkte ich, dass das Überfliegen dass leerer Raum den Text machte zu richtig 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 funktionieren mit MouseEnter-/moseleave und schweben:

<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