Mootools: how to stop delay events with 'mouseenter' and 'mouseleave'

Question

I'm quite a newbie with javascript and mootols and I've got a question about delay and event handling with Mootools.

My goal: the menu appears in a primary position, then after a certain time moves to a secondary position and toggles opacity, then on mouseenter it reappears in the primary position with full opacity and on mouseleave it goes back to the secondary position.

I've been going around this problem for sometime and I've read lots of demos and questions but I can't get to the point... I've had problems on the mouseenter mouseleave (which have a delay, therefore if I put the mouse on the just loaded menu after a while the menu just goes to its secondary position) or the total chaos that is generated if i just move the mouse in and out of the menu.

Here's the code:

window.addEvent('domready', function(){
var el = $('menu'),
    color = el.getStyle('backgroundColor');


        // Morphs to secondary style
    var menuHide = function(){
    this.morph({'background-color': '#000000',
   'opacity': 0.6,'margin-top': -43}) };
    menuHide.delay(5000, el);



    $('menu').set('duration', 100).addEvents({

        mouseenter: function(){ 
            // Morphs back to the primary style
                this.morph({
                'opacity': 1.0,
                'background-color': '#B51000',
                'margin-top': 0
            });
        },
        mouseleave: function(){

            // Morphs back to the secondary style
            this.store("timer", (function(){
                            this.morph({
                            'opacity': 0.6,
                            'background-color': '#000000',
                            'margin-top': -43
                            });
            }).delay(2000,this));
        }

    });

Can you please help me? I'm desperate!

Answer 1

I managed to fix it by mixing a bit of my code with yours, I understood I needed a timer...

window.addEvent('domready', function() {
var myMorph = new Fx.Morph($('menu'), {
    duration: 1000,
    link: 'cancel'
});
var timer;
$('menu').addEvents({
    'domready': function() {
        var myDelay1 = function() {
            myMorph.start({
                'opacity': 0.6,
                'background-color': '#000000',
                'margin-top': -43
            });
        };
        timer = myDelay1.delay(5000);
    },
    mouseenter: function() {
        clearTimeout(timer);
        myMorph.start({
            'opacity': 1.0,
            'background-color': '#B51000',
            'margin-top': 0
        });
    },
    mouseleave: function() {
        var myDelay1 = function() {
            myMorph.start({
                'opacity': 0.6,
                'background-color': '#000000',
                'margin-top': -43
            });
        };
        timer = myDelay1.delay(2000);
    }
});});

Answer 2

If I understand you right, what you are missing is the timer id and then clearing it before you start a new transition.

Something like this might do the trick (untested):

var Menu = new Class({
    initialize: function(el) {
        this.element = el;
        this.timer = null;

        this.element.set('duration', 100);
        this.element.addEvents({
            mouseenter: this.enter.bind(this),
            mouselave: this.leave.bind(this)
        });

    },
    enter: function() {
        this.stopTimer();
        this.element.morph({
            'opacity': 1.0,
            'background-color': '#B51000',
            'margin-top': 0
        });
    },
    leave: function() {
        this.stopTimer();
        this.timer = this.element.morph({
            'opacity': 0.6,
            'background-color': '#000000',
            'margin-top': -43
        }).delay(2000));
    },
    stopTimer: function() {
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
});

var menu;
window.addEvent('domready', function() {
    menu = new Menu($('menu'));
});