यदि माउस 2 सेकंड से अधिक के लिए खत्म होता है तो और दिखाएं नहीं?

Question

यहां एक jQuery स्लाइड फ़ंक्शन है जिसे मैंने बटन को स्लाइड करने के लिए होवर पर एक div पर लागू किया है।

यह ठीक काम करता है सिवाय इसके कि अब हर कोई इसमें से बाहर निकलता है, यह ऊपर और नीचे बोबिंग रखता है।

मुझे लगा कि अगर मैं इसमें एक या दो सेकंड देरी टाइमर डालता हूं तो यह अधिक समझ में आता है।

स्लाइड को चलाने के लिए फ़ंक्शन को कैसे संशोधित किया जाएगा यदि उपयोगकर्ता दूसरे या दो से अधिक के लिए div पर है?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script> 
<script type="text/javascript"> 

$("#NewsStrip").hover(
function() { 
    $("#SeeAllEvents").slideDown('slow'); }, 
function() { 
    $("#SeeAllEvents").slideUp('slow'); 
}); 

</script> 

Answer 1

आप माउसओवर पर एक टाइमर सेट और यह स्पष्ट करने की जरूरत है या तो जब स्लाइड सक्रिय है या mouseout पर, जो भी पहले होती है:

var timeoutId; 
$("#NewsStrip").hover(function() { 
    if (!timeoutId) { 
     timeoutId = window.setTimeout(function() { 
      timeoutId = null; // EDIT: added this line 
      $("#SeeAllEvents").slideDown('slow'); 
     }, 2000); 
    } 
}, 
function() { 
    if (timeoutId) { 
     window.clearTimeout(timeoutId); 
     timeoutId = null; 
    } 
    else { 
     $("#SeeAllEvents").slideUp('slow'); 
    } 
}); 

See it in action.

Answer 2

var time_id; 

$("#NewsStrip").hover(
function() { 
    if (time_id) { 
     clearTimeout(time_id); 
    } 
    time_id = setTimeout(function() { 
     $("#SeeAllEvents").stop(true, true).slideDown('slow'); 
    }, 2000); 
}, function() { 
    if (time_id) { 
     clearTimeout(time_id); 
    } 
    time_id = setTimeout(function() { 
     $("#SeeAllEvents").stop(true, true).slideUp('slow'); 
    }, 2000); 
});