This week we are going to keep moving forward with our look at using MooTools to make our pages have some nice, fancy effects. The last few posts we looked at how easy it is with MooTools to animate different CSS properties. We are going to expand on that this post and for next weeks post all the effects will culminate in a gorgous menu.

First up: effect chaining. What is effect chaining you ask. Effect chaining allows you to chain together 2 or more effects so that as soon as the first effect completes the second effect begins. You can chain as many together as you want. In the example below, we will chain together six effects. We will move right, then left, then further right, then left, then further right again then back to our start position;

Click Me to See Some Chaining

window.addEvent('domready', function() {
	myTween = new Fx.Tween('moveMe', 'marginLeft', { link: 'chain' });
 
	$('click1').addEvent('click', function(e) {
		myTween.start(100).start(50).start(150).start(100).start(200).start(0);
		e.stop();
	});
});

Next up is a really simple effect that you see all over the place on the web. What we are going to do is animate the background color of an element from any color back to its original color. This is a great method to draw attention to items that may have changed.

Change Something

window.addEvent('domready', function() {
	$('clickMe2').addEvent('click', function(e) {
		$('highlightMe').highlight('#ff9900');
		e.stop();
	});
});

Last but certainly not least is the absolutely important task of knowing when your animation is complete. When you are moving stuff all over the place you dont want to trigger events too early. MooTools javascript library allows you to easily trigger an event when an effect is done. Below, we will trigger the onComplete event when the animation is done. Once it finishes, we will pop up an alert box and then move back to our starting location.

Show Me the Goods

window.addEvent('domready', function() {
	$('click3').addEvent('click', function(e) {
		$('doneMe').set('tween', {
			onComplete: function(e) {
					$(e.id).set('tween', { onComplete: Class.empty });
					alert('All done.  I\'m going to go back home now');
					$(e.id).tween('marginLeft', 0);
				}
			});
		$('doneMe').tween('marginLeft', '400');
		e.stop();
	});
});

This entry was posted on Thursday, March 13th, 2008 at 5:03 pm and is filed under MooTools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.