jQueryのホバーループ

Question

私はこの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); 
}); 

をし、これが私の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> 

私は1つの項目にカーソルを移動しますときに私がしたい、他の項目は非表示になり、コードは正常に機能しますが、隠れている間に別のアイテム（700ミリ秒）を動かすと問題が発生し、アイテムを隠す/表示するループが作成されます。これを防ぐために何ができるのですか？

jsFiddle

注：私はホバー項目は固定したままではない、左に行きたいです。

Answer 1

li要素にはfloat: leftが使用されていました。したがって、ulは幅と高さがありませんでした。このCSSを適用します。

ul { 
    overflow: auto; 
} 

とも私は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); 
} 

あなたが個人にmouseleaveイベントを適用したULすなわちLI要素の代わりに、親要素を推移。あなたはフロートに別の原因をホバリング避けることができないという理由だけで

Working Fiddle