How do I stop events from bubbling/multiple events with animated mouseovers?

Posted by Kurucu on Stack Overflow See other posts from Stack Overflow or by Kurucu
Published on 2010-05-31T13:20:45Z Indexed on 2010/05/31 13:23 UTC
Read the original article Hit count: 166

Filed under:
|

I noticed a lot of JQuery answers on this, but I'm using MooTools...

I have a Table of Contents which uses CSS Fixed positioning to keep it off to the left side, except for 20 pixels. The user hovers their cursor over the 20 pixels, which fires the DIV's mouseover event and the ToC slides fully into the page. When the cursor leaves, the ToC slides back to where it was.

$('frameworkBreakdown').addEvents({
    'mouseover': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', 20);
        event.stop;
    },
    'mouseout': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', (10 - $('frameworkBreakdown').getStyle('width').toInt()) );
        event.stop;
    }
});

This works well (aside from unrelated issues) except that when I move the mouse on the DIV it starts to jitter, presumably because the contents of the DIV are also firing the event, or the event refires as the mouse tracks over the DIV.

How can I stop this behaviour from occuring? Is there a standard method, or do I use some sort of nast global variable that determines whether effects are in action, and thus ignore the event?

© Stack Overflow or respective owner

Related posts about animation

Related posts about mootools