JQuery vurgulu döngü

Question

Bu JQuery kodu ile ilgili bir sorun vardır:

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

ve bu benim 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> 

Ben bir öğe üzerinde gezdirin ne zaman istediğim, diğer öğeleri gizlemek olmak, kod çalışıyor, ancak saklanma süresi içinde başka bir öğeyi (700 ms) tutarsam sorunum var, gizleme/gösterme öğelerinin bir döngüsünü yapar. Bunu önlemek için ne yapabilirim.

jsFiddle

not: Ben Vurgulanan öğe sabit kalmayıp, sola gider istiyorum.

Answer 1

Sen li elemanlarına float: left .. kullanıyorlardı

böylece ul hiçbir genişliği ve yüksekliği ile oldu.

ul { 
    overflow: auto; 
} 

ve ayrıca jQuery bazı değişiklikler yapılmış: Bu CSS uygula Eğer bireye mouseleave olay LI eleman yerine UL yani ana unsuru süpürdü uygulayarak edildi

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

. nedeniyle yüzen başka gezinip kaçınamaz çünkü

Working Fiddle