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> 

Я хочу, чтобы, когда я зависать на одном пункте, другие предметы будут скрывать, код работает нормально, но проблема в том, что если я навещу еще один элемент во время скрытия (700 мс), он сделает цикл скрыть/показать элементы. что я могу сделать для предотвращения этого.

jsFiddle

Примечание: Я хочу, чтобы парил пункт идет налево, не остаются неподвижными.

Answer 1

Вы использовали float: left к li элементов .. поэтому 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 события для человека колебалось LI элемента вместо родительского элемента т.е. UL.

Working Fiddle