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

आप li तत्वों को float: left .. उपयोग कर रहे थे तो ul कोई चौड़ाई और ऊंचाई के साथ किया गया था। इस सीएसएस लागू करें:

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 तत्व hovered।

Working Fiddle