jQuery Hide/Show with Slide on Hover ... modo migliore per farlo?

Question

Fondamentalmente si ha qualche problema con l'uso di Hover per nascondere o mostrare un oggetto.

L'idea è semplice, al passaggio del mouse mostra un div. Quando non si è più in bilico, nascondilo. Il problema è che se il mouse sorvola il div e esce troppo velocemente, il div show/hide resterà visibile. Spero che questo sia qualcosa di facilmente rimediabile e non un tipico problema con l'evento 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); 
     } 
    ); 
    } 
); 

Stili assomigliano:

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

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

e markup

<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

Utilizzare il hoverIntent plugin. Questo evita qualsiasi cosa venga mostrata se l'utente passa semplicemente il mouse sugli elementi ed evita una catena di animazioni antiestetiche.

Answer 2

Ho provato il tuo script e ha funzionato come hai descritto. Ho provato a rimuovere child.is (": hidden") dallo script, ma il problema si è verificato ancora.

Quando ho riscritto lo script, il div non rimane mai visibile. Così, sembra che il problema sia con l'utilizzo di jQuery figli invece di trovare per raggiungere l'oggetto:

ha ancora problemi:

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); 
     } 
    ); 
    } 
); 

funziona come previsto:

$(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) 
    } 
    ) 
}) 

E sì, il plugin hoverIntent è bello: P