Mootools: hide, show Div contents

[Sugz]

Okay, So i have a nice menu which shows and hides divs to change the page content.
however If I click on a multiple menu items quickly, I get a stacking up of divs, or multiple divs showing themselves in the window.
I'm trying to implement a kind of delay so an effect must take place only when the one proceeding it has finished. But its probing very tricky.
Here is the source of it so far.

var showFunction = function(e) {
	$$('.hidden').setStyles({
		'visibility': 'hidden',
		'opacity': 0
	
	});
	this.start({'visibility': 'visible','opacity': 1 });

}


var contentHome = $('Content-Home');
 var contentAbout = $('Content-About');
 var contentContact= $('Content-Contact');
 
 contentHome = new Fx.Morph(contentHome, { link: 'chain' });
 contentAbout = new Fx.Morph(contentAbout, {link: 'chain' });
 contentContact = new Fx.Morph(contentContact, {link: 'chain' });
 
 $('Home').addEvent('click', showFunction.bind(contentHome));
 $('About').addEvent('click', showFunction.bind(contentAbout));
 $('Contact').addEvent('click', showFunction.bind(contentContact));

[Dimitar]

the Fx class supports cancel:

http://mootools.net/docs/core/Fx/Fx#Fx:cancel

hence you can stop the instances of all morphs like:

contentHome.cancel();
contentAbout.cancel();
// etc.

better yet, record which one is running into a globa variable by passing reference to the Fx instance to some var like

PHP Code:

var runningAnimation = false, showFunction = function() {
    if (runningAnimation) // may need to tweak this for the first run instance.
         runningAnimation.cancel();

    // this is not optimal on a menu with mouseover when rapid movement can cause cpu lag. 
    // cache the $$(".hidden") into a variable so it does not traverse dom all the time. 
    // another thing, if .hidden is all div, use "div.hidden" as selector. 
    // if all hidden are children of a layer called "mainContent", use in _global scope_ 
    // var hid = $("mainContent").getElements("div.hidden"); ... hid.setStyles( ... );
    $$('.hidden').setStyles({
        'visibility': 'hidden',
        'opacity': 0
    });

    this.start({'visibility': 'visible','opacity': 1 });

    runningAnimation = this; // store last running animation so it can be stopped.
}; 


to do a delay is also possible - check reference = function.delay(ms, scope); and $clear(reference); - you can clear effect if mouse did not stay on top long enough etc.

good luck