jquery: stop function immediately

Question

when mouseover .down, the div layer slides down
when mouseover .up, the div layer slides up

If the mouse goes over .b, how do I get the div to slide down without having to wait for the div layer to slide up first? basically kill the previous function immediately

<a href="#" class="down">Slide Down</a>
<a href="#" class="up">Slide Up</a>

<div style="height:400px;width:200px;background-color:#ccc">
</div>


<script>
$(document).ready(function() {
    $('.down').mouseover(function() {
        $('div').slideDown();                          
    });

    $('.up').mouseover(function() {
        $('div').slideUp();                        
    });
});
</script>

Answer 1

Adding an answer so the question is not left "unanswered".

Per @Pointy, the .stop() function is what you want. You would add it before you call .slideDown() in order to stop the element's currently-running animation.

$(document).ready(function() { 
    $('.down').mouseover(function() { 
        $('div').stop(true, true).slideDown();                           
    }); 

    $('.up').mouseover(function() { 
        $('div').slideUp();                         
    }); 
});