MooTools Gone Wild: Implement Element Flashing

XHTML

<div id="flash-me"><a id="flash-link" href="javascript:;">Click here</a> to make me flash!</div>

MooTools JavaScript

/* dom ready... */
		window.addEvent('domready', function() {
			
			/* implement flashing */
			Element.implement({
				flash: function(to,from,reps,prop,dur) {
					
					//defaults
					if(!reps) { reps = 1; }
					if(!prop) { prop = 'background-color'; }
					if(!dur) { dur = 250; }
					
					//create effect
					var effect = new Fx.Tween(this, {
							duration: dur,
							link: 'chain'
						})
					
					//do it!
					for(x = 1; x <= reps; x++)
					{
						effect.start(prop,to,from).start(prop,from,to);
					}
				}
			});

Usage

/* flash on click */
			$('flash-link').addEvent('click', function () {
				$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
			});
			
/* flash on ajax complete */
			$('flash-link-ajax').addEvent('click', function () {
				//make the ajax call
				var req = new Request({
					method: 'get',
					url: 'example2.php',
					data: { 'do' : '1' },
					onRequest: function() {  },
					onComplete: function(response) {
						$('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); 
					}
				}).send();
				
			});
			
/* flash on scroll ending */
			$('flash-link-scroll').addEvent('click', function() {
				var scroller = new Fx.Scroll(window, {
					onComplete: function() {
						$('scroll-to-me').flash('#fff','#fffea1',10);
					}
				}).toElement('scroll-to-me');
			});
		});

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO