CODEWITHSUNDEEP
mootools
Chameron
Chameron

Reputation: 2984

mootool 1.1 how to stop event when do another event

i have a div element with Fx.styles effect

when mouseover : width is 300px

and mouseleave : this width is 100px .

Now, when i do mouseover , width run from 200px to 300px,

But when width run to 250px , i do mouseleave and i think width will run from 250px to 100px.

My think is wrong , width from 200px to 300px then back to 100px.

How to my think come TRUE :D

    <div id="element" style="width:200px;">
        Content content content
    </div>
    <script>
    var myEffects = new Fx.Styles('element',{
                unit: 'px',
                duration: 400,
                });

        $('element').addEvents({
            'mouseover' : function(e){
                new Event(e).stop();
                myEffects.start({
                    'width': 300
                });
            },
            'mouseleave' : function(e){
                new Event(e).stop();
                myEffects.start({
                    'width': 100
                });
            }

        });
</script>

Upvotes: 0

Views: 143

Answers (2)

arian
arian

Reputation: 708

1.11 has the 'wait' option which is either true or false. Please upgrade though :-)

Upvotes: 1

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

in 1.2+ you can pass on "link": "cancel" to the Fx instance and it will work. not so in 1.11 - but you can apply .stop() on the instance instead:

http://www.jsfiddle.net/zbKLj/

var myEffects = new Fx.Styles('element', {
    unit: 'px',
    duration: 400
});

$('element').addEvents({
    'mouseenter': function(e) {
        myEffects.stop().start({
            'width': 300
        });
    },
    'mouseleave': function(e) {
        myEffects.stop().start({
            'width': 200
        });
    }

});

please note you should use mousenter/mouseleave OR mouseover/mouseout and not mix them up. in fact, just forget about mouseover/mouseout pair as they can falsely bubble in IE when the container element has children (it will fire a mouseout when over a child element).

Also, trailing comma on the options object will trigger IE errors, I hope this was just for the example's sake :)

Upvotes: 1

Related Questions