JQuery Hover-Schleife

Question

Ich habe ein Problem mit diesem JQuery-Code:

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

und das ist mein 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> 

ich will, wenn ich auf ein Element schweben kann, werden andere Elemente auszublenden, der Code funktioniert gut, aber das Problem ist da, wenn ich ein anderes Element in der Dauer des Versteckens (700 ms) schwebe, wird es eine Schleife von verstecken/zeigen Gegenstände. Was kann ich dagegen tun?

jsFiddle

Anmerkung: Ich möchte die hovered- Artikel, nach links geht nicht fixiert bleiben.

Answer 1

Sie wurden float: left die li Elemente .. so die ul war ohne Breite und Höhe. Wenden Sie diese CSS:

ul { 
    overflow: auto; 
} 

und ich habe auch einige Änderungen in 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); 
} 

Sie mouseleave Ereignis an den einzelnen schwebte LI Element anstelle des Elternelements d.h UL anwendeten.

Working Fiddle