jQuery Cacher/Montrer avec Diapositive sur Hover ... meilleure façon de le faire?

Question

Fondamentalement avoir quelques problèmes avec l'utilisation de Hover pour cacher ou montrer un élément.

L'idée est simple, en survolant un div. Lorsque vous ne planez plus, cachez-le. Le problème est que si la souris survole le div et part trop vite, le div show/hide restera visible. J'espère que c'est quelque chose qui peut facilement être corrigé et qui n'est pas un problème typique avec l'événement hover.

jQuery 
(
    function() 
    { 
    jQuery(".slideDiv").hide(); 

    jQuery(".mainDiv").hover 
    (
     function() 
     { 
     var children = jQuery(this).children(".slideDiv"); 

     if (children.is(":hidden")) 
     { 
      children.show("slide", { direction: "left" }, 100); 
     } 
     }, 
     function() 
     { 
      var children = jQuery(this).children(".slideDiv"); 
      children.hide("slide", { direction: "left" }, 100); 
     } 
    ); 
    } 
); 

Styles ressemblent:

.mainDiv 
{ 
    margin:5px; 
    height:200px; 
} 

.slideDiv 
{ 
    background-color:Teal; 
    float:left; 
    height:200px; 
    position:absolute; 
    z-index:100; 
} 

et le balisage

<div class="mainDiv"> 
     <div class="showDiv"> 
      Hover me 
     </div> 
     <div class="slideDiv"> 
      Do you see me? 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="mainDiv"> 
     <div class="showDiv"> 
      Hover me too 
     </div> 
     <div class="slideDiv"> 
      Do you see me now? 
     </div> 
    </div> 

Answer 1

Utilisez le plug-in hoverIntent. Cela évite que rien ne soit montré si l'utilisateur passe simplement la souris sur les éléments, et évite une chaîne disgracieuse d'animations.

Answer 2

J'ai essayé votre script et il a fait comme vous l'avez décrit. J'ai essayé de supprimer le children.is (": hidden") de votre script, mais le problème est toujours survenu.

Lorsque je l'ai réécrit le script, le div ne reste jamais visible. Ainsi, il semble que le problème est à l'utilisation jQuery enfants au lieu de trouver pour se rendre à l'objet:

a encore des problèmes:

jQuery (
    function(){ 
    jQuery(".slideDiv").hide(); 
    jQuery(".mainDiv").hover (
     function() { 
     $(this).children(".slideDiv").show("slide", { direction: "left" }, 100); 
     },function(){ 
     $(this).children(".slideDiv").hide("slide", { direction: "left" }, 100); 
     } 
    ); 
    } 
); 

fonctionne comme prévu:

$(document).ready(function(){ 
    $('.slideDiv').hide(); 
    $('.mainDiv').hover(
    function(){ 
     $(this).find('.slideDiv').show('slide', { direction: 'left' }, 100) 
    }, 
    function(){ 
     $(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100) 
    } 
    ) 
}) 

Et oui, le plugin hoverIntent est sympa: P