mootools

References to Documentation

1. Effects/Fx-Styles.js#Element.effects
2. Element/Element-Event.js#Element.addEvent
3. Native/Element.js#Element.setHTML
4. Class/Class-Extras.js#Chain
5. Effects/Fx-Style.js#Fx.Style.start
6. Native/Function.js#Function.delay

var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
 
$('start').addEvent('click', function() {
	log.setHTML('starting...');
	fx.start({
		'width': 300,
		'height': 210
	}).chain(function(){
		// executes immediately after completion of above effect
		log.setHTML('First effect completed (1/5)');
		this.start({
			'opacity': .3
		});
	}).chain(function() {
		// executes 5 seconds after completion of above effect
		log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
		this.start.delay(5000, this, {
			'opacity': 1
		});
	}).chain(function() {
		// executes 2 seconds after completion of above effect
		log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
		this.start.delay(2000, this, {
			'background-color': '#89c577'
		});
	}).chain(function() {
		// executes 1 seconds after completion of above effect
		log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
		this.start.delay(1000, this, {
			'background-color': '#4f8096',
			'width': 100,
			'height': 70
		});
	}).chain(function() {
		// executes immediately after completion of above effect
		log.setHTML('Fifth effect completed (5/5).');
	});
});

<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>

#box {
	margin: 0pt auto;
	width: 100px;
	height: 70px;
	background: #4f8096;
	border: 1px solid #7199ab;
}
 
#start {
	text-align: center;
	margin: .5em 0;
}