Question

While my div is sliding down or up if I move the mouse on that same div, the hover effect happens a second time (or even more), how do I make if the function is now working it shouldn’t restart till I take the mouse away and hover again?
​

<div id="hover">Hover on me<div id="hidden">You hovered!!</div></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$(document).ready(function () {
$('#hover').show();
$('#hidden').hide();    
$('#hover').hover(function () {
    $('#hidden').slideDown(100);
    }, function () {
        $('#hidden').slideUp(100);
    });
});​

Answer 1

You should use jQuery .stop() (API) See the jsfiddle here.

What you want to do is change your hover function slighty.

Add in .stop()

$('#hover').hover(
    function () {
        $('#hidden').slideDown(100);
    }, function () {
        $('#hidden').stop().slideUp(100);
    }
);