Comment résoudre ce problème jQuery

Question

J'ai 2 divs au-dessus les uns des autres, à un moment donné l'un est affiché et l'autre est caché, le script devrait afficher # div2 lorsque la souris entre # div1 et devrait afficher # div1 lorsque la souris le problème vient quand la souris entre # div1 et quitte avant que # div2 soit affiché ainsi le # div2 restera affiché mais la souris a laissé # div2 déjà n'importe quelle aide?

Mon code jQuery:

$('#div1').mouseenter(function(){ 
$('#div1').fadeOut("fast",function(){ 
    $('#div2').fadeIn("fast"); 
}); 
}); 

$('#div2').mouseleave(function(){ 
$('#div2').fadeOut("fast",function(){ 
    $('#div1').fadeIn("fast"); 
}); 
}); 

Answer 1

Je suggère d'utiliser hover() ici:

$("#div1, #div2").hover(function() { 
    $(this).stop().fadeOut("fast"); 
}, function() { 
    $(this).stop().fadeIn("fast"); 
}); 

Note: Je l'ai utilisé stop() sur les animations, ce qui est une bonne habitude à prendre . La version ci-dessus permet également aux deux divs d'avoir le même gestionnaire, ce qui réduit votre code.