jQuery: .stop() फ़ंक्शन का सही तरीके से उपयोग कैसे करें?

Question

इस पृष्ठ परः

http://www.arvag.net/old/smsbox.de/

जब आप "Informationen" और "Über इन" पर होवर करें, यह एक उप मेनू को दर्शाता है। जब आप माउस को दूर ले जाते हैं, तो यह छुपाता है। आम तौर पर, मुझे jQuery बनाने के साथ समस्या होती है जो हर एक होवर बनाता है, और फिर यह उन सभी hovers एनिमेटिंग पर रहता है। मैंने stop() को लागू करने का प्रयास किया, लेकिन मैं इसे ठीक से काम करने के लिए नहीं मिल सकता।

<script type="text/javascript"> 
    //<![CDATA[ 
    $(function(){ 
     $('#nav_menu > .center > ul > li').hover(function() { 
      $(this).stop(true,true).children('ul').slideToggle('slow'); 
     }).click(function(){ 
      return false; 
     }); 
    }); 
    //]]> 
</script> 

धन्यवाद:

इस कोड मैं का उपयोग कर रहा है!

Answer 1

आप कतार को रोकने के लिए दोनों दिशाओं में .stop() की जरूरत है, अन्यथा मंडराना की mouseenter हिस्सा कतार रहती है यह एनिमेशन है। इसके अतिरिक्त, क्योंकि आप टॉगल रहे हैं, आप इसे नीचे इस तरह छोटा कर सकते हैं:

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul').stop(true,true).slideToggle('slow'); 
}).click(function(){ 
    return false; 
}); 

आप ul तत्वों पर .stop() की आवश्यकता होगी के बाद से है कि क्या एनिमेट रहा है। इसे आज़माएं, आप देखेंगे कि यह अभी भी थोड़ी उलझन में है क्योंकि यह कतार के बजाय एनीमेशन को रीसेट कर रहा है। एक वैकल्पिक मैं लघु संस्करण है कि कोशिश की, ... मैं इस प्रभाव को पसंद करते हैं, लेकिन आप को यह :visible और :hidden चयनकर्ताओं का उपयोग कर की तरह कतार को रोकने के लिए, :)

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul:hidden').slideDown('slow'); 
}, function() { 
    $(this).children('ul:visible').slideUp('slow'); 
}).click(function(){ 
    return false; 
}); 

Answer 2

मुझे विश्वास है कि आपको होवर-ओवर हिस्से पर stop(true,true) भी रखना होगा। इसके बाद यह मेरे द्वारा निष्पादित करने के लिए इस समय चल रहे अन्य एनिमेशन को बाधित करता है, जब तक कि मैं गलत नहीं हूं।

$('#nav_menu > .center > ul > li').hover(function() { 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    },function(){ 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    }).click(function(){ 
     return false; 
    });