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

$(function () {

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

        $('.mainMenuDiv a').hover(function () {

            tabContainers.filter(this.hash).dequeue().slideDown();

        },function () {

            tabContainers.filter(this.hash).dequeue().slideUp();

        });

});

Hope that this helps. ;) Events “bubble up” from the child element to all its parents, and you would event.stopPropragation(); or event.stopImmediatePropagation(). However to stop animation you dequeue().

Answer 2

I could be wrong, but this might work:

$(function () {
    var tabContainers = $('div.subMenu > div');
    tabContainers.hide();
    $('.mainMenuDiv a').hover(function() {
        tabContainers.filter(this.hash).stop().slideDown();
    },function() {
        tabContainers.filter(this.hash).stop().slideUp();
    });
});

Answer 3

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.