JQuery hover ciclo

Question

Ho un problema con questo codice jQuery:

$(".item").mouseenter(function(){ 
    $(this).addClass("active"); 
    $(this).removeClass("item"); 
    $(".item").hide(700); 
}).mouseleave(function(){ 
    $(this).stop(); 
    $(this).addClass("item"); 
    $(this).removeClass("active"); 
    $(".item").show(700); 
}); 

e questo è il mio HTML:

<ul> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
    <li class="item">Item</li> 
</ul> 

che voglio quando faccio hover su un elemento, altri punti siano nascondere, il codice funziona bene ma il problema è lì se metto il mouse su un altro oggetto nella durata del nascondiglio (700 ms), creerà un loop di elementi hide/show. cosa posso fare per impedirlo.

jsFiddle

nota: voglio l'oggetto è passato il mouse va a sinistra, non rimanere fisso.

Answer 1

Si stava utilizzando float: left agli li elementi .. quindi la ul era senza larghezza e altezza. Applicare questo CSS:

ul { 
    overflow: auto; 
} 

e anche ho fatto alcuni cambiamenti nel jQuery:

$(".item").on('mouseenter', mEnter) 
$('ul').on('mouseleave', function() { 
    $('.item').stop(); 
    $('.active').removeClass("active") 
     .addClass("item"); 
    $(".item").show(700); 
}); 

function mEnter() { 
    $(this).addClass("active"); 
    $(this).removeClass("item"); 
    $(".item").hide(700); 
} 

si stava applicando mouseleave evento per l'individuo aleggiava LI elemento al posto dell'elemento genitore cioè UL.

Working Fiddle