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();
            });
    });

I'm not sure why you want to? You're using a hover effect so the general expected behaviour is that if a user mouses over several elements quickly then they will all animate. Otherwise what criteria are you using to decide which one the user actually wants to expand? (This is generally why click is the preferred user interaction for expanding and hiding) — Steerpike, Sep 28 '09 at 20:56

score 4 · Accepted Answer · answered Sep 28 '09 at 20:58

4

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.

answered Sep 28 '09 at 20:58

dcharles

4,822
2
32
29

1

+1, the second code (with the true, true) is the only one that doesn't get stuck (as explained in my comments at the other replies). – Waleed Amjad Sep 28 '09 at 21:01
Ah, yes, good call with the (true,true) params. I knew there was something I forgot. Good work Marve. – KyleFarris Oct 01 '09 at 14:58

score 2 · Answer 2 · answered Jun 28 '11 at 20:50

Be carefull when using stopPropagation() and stopImmediatePropagation() as if they were the same thing:

The Event.stopPropagation() method prevents the event object from moving on to the next node, but only after any other event listeners on the current node are allowed to execute.
The Event.stopImmediatePropagation() method also prevents the event object from moving on to the next node, but does not allow any other event listeners on the current node to execute.

score 0 · Answer 3 · answered Sep 28 '09 at 20:52

$(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().

If the user repeatedly and very quickly hovers over and out the element, the animation will get stuck under both IE and FF. Not sure if this is a bug though, — Waleed Amjad, Sep 28 '09 at 20:58

score 0 · Answer 4 · answered Sep 28 '09 at 20:57

0

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();
    });
});

answered Sep 28 '09 at 20:57

KyleFarris

17,274
5
40
40

If the user repeatedly and very quickly hovers over and out the element, the animation will get 'stuck' under both IE and FF. Not sure if this is a bug though. – Waleed Amjad Sep 28 '09 at 21:00

jQuery - how to use stopPropagation()

4 Answers4

Linked