JQuery hover loop

Question

Tôi có một vấn đề với mã JQuery này:

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

và đây là HTML của tôi:

<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> 

tôi muốn khi tôi lơ lửng trên một mặt hàng, các mặt hàng khác được ẩn, các mã hoạt động tốt nhưng vấn đề là có nếu tôi di chuột một mục trong thời gian ẩn (700 ms), nó sẽ làm cho một vòng lặp của ẩn/hiển thị các mục. tôi có thể làm gì để ngăn chặn điều này.

jsFiddle

lưu ý: Tôi muốn các mục bay lượn đi sang trái, không ở lại cố định.

Answer 1

Bạn đang sử dụng float: left cho các yếu tố li .. do đó, ul không có chiều rộng và chiều cao. Áp dụng CSS này:

ul { 
    overflow: auto; 
} 

và tôi cũng thực hiện một số thay đổi trong 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); 
} 

ông đang áp dụng mouseleave kiện cho cá nhân dao động LI yếu tố thay vì các yếu tố cha mẹ tức là UL.

Working Fiddle