jQuery - how to use stopPropagation()

Question

I've done this before, but I'm having trouble getting this to work...

I need the following jquery to have a .stopPropagation function, so the animation won't go crazy if the user hovers over three elements too quickly!

    $(function () {
            var tabContainers = $('div.subMenu > div');
            tabContainers.hide();

            $('.mainMenuDiv a').hover(
            function (e) {
                tabContainers.filter(this.hash).slideDown();
                e.stop();
            },
            function(e){
                tabContainers.filter(this.hash).slideUp();
                e.stopPropagation();
            });
    });

Answer 1

Sounds like you are looking for the stop function that cancels any incomplete animations.

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop().slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop().slideUp();
    }
);

or if you'd like any in-progress animation(s) to be "rolled back" try:

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop(true, true).slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop(true, true).slideUp();
    }
);

Check out the docs for more info.