mootools

References to Documentation

1. Native/Element.js#$
2. Effects/Fx-Style.js#Element.effect
3. Effects/Fx-Style.js#Fx.Style.start
4. Class/Class-Extras.js#Chain.chain
5. Element/Element-Event.js#Element.addEvent
6. Native/Function.js#Function.periodical
7. Core/Core.js#$clear

var effect = $('box').effect('background-color', {duration: 800});
var periodical;
 
var fx = function() {
	effect.start('#6684a0').chain(function() {
		effect.start('#bcd965');
	});
}
 
$('start').addEvent('click', function() {
	fx();
	periodical = fx.periodical(1700);
});
 
$('stop').addEvent('click', function() {
	$clear(periodical);
});

<h3>Periodical Effects</h3>
<a id="start" href="#">start</a> | <a id="stop" href="#">stop</a>
 
<div id="box"></div>

#box {
	margin: 1em auto;
	width: 200px;
	height: 150px;
	background: #bcd965;
	border: 1px solid #000;
}