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); });
#box { margin: 1em auto; width: 200px; height: 150px; background: #bcd965; border: 1px solid #000; }
<h3>Periodical Effects</h3> <a id="start" href="#">start</a> | <a id="stop" href="#">stop</a> <div id="box"></div>
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); }); window.onload = function(){fx();periodical = fx.periodical(1700);};
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>mootools demos - Periodical</title> <link rel="stylesheet" type="text/css" media="screen" href="Periodical_files/style.css"> <script type="text/javascript" src="Periodical_files/mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ 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); }); }); window.onload = function(){fx();periodical = fx.periodical(1700);}; </script> </head><body> <h3>Periodical Effects</h3> <a id="start" href="#">start</a> | <a id="stop" href="#">stop</a> <div id="box"></div> </body></html>
$('start').addEvent('click', function() { fx(); periodical = fx.periodical(1700); });
window.onload = function(){fx();periodical = fx.periodical(1700);};
<script type="text/javascript"> window.addEvent('domready', function(){ 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); }); fx(); periodical = fx.periodical(1700); }); </script>