Jquery Hover agit bizarre quand je laisse la souris sur l'élément

Question

J'ai le code html suivant:

<div id="join-us-subheader-imgs"> 
    <div class="subheader-img-wrapper"> 
     <img src="/wp-content/themes/lib/join_us/join-us_1.png"> 
     <p class="img-quote">"This is a quote example. And there's more text here."</p> 
    </div> 
    <div class="subheader-img-wrapper"> 
     <img src="/wp-content/themes/lib/join_us/join-us_2.png"> 
     <p class="img-quote">"This is a quote example. And there's more text here."</p> 
    </div> 
</div> 

et le css:

.subheader-img-wrapper { 
    float: left; 
    margin-right: 10px; 
    position: relative; 
} 

.subheader-img-wrapper img:hover{ 
    cursor: pointer; 
} 

.img-quote { 
    display: none; 
    width: 125px; 
    height: 80px; 
    position: absolute; 
    top: 0; 
} 

aaand le javascript:

$(document).ready(function() { 
    $(".subheader-img-wrapper").hover(
     function(){ 
      $(this).find('img:first').fadeOut("slow", function(){   
       $(this).parent().find('p:first').fadeIn("slow"); 
      }); 
     }, 
     function(){ 
      $(this).find('p:first').fadeOut("slow", function() {    
       $(this).parent().find('img:first').fadeIn("slow"); 
      }); 
     } 
    ); 
}); 

la chose est, quand je garde la souris sur le premier il commence à entrer et sortir de la fonction hover comme si je

Answer 1

Il se produit car lorsque .fadeOut fonctions se termine, l'élément reçoit un événement mouseout, ce qui déclenche votre autre fonction ..

Answer 2

Je pense que vous devez faire 3 changements,

a. Au lieu de stationnaire, vous devez implémenter gestionnaire de souris pour img tag et gestionnaire de sortie de souris pour p tag

b. Changer le css de .img-quoteposition: relative;

c. Séquence fadeIn et fadeOut en utilisant la méthode de rappel, de sorte que les étiquettes img et p ne soient pas affichées en même temps.

DEMO