MooTools

• Demos

• Chaining
• Native
• Periodical

• Slick

• Slick.Finder

• Drag and Drop

• Drag.Cart
• Drag.Drop
• Drag.Move
• Drag.Scroll

• Effects

• Effects
• Fx.Morph
• Fx.Slide
• Fx.Sort
• Transitions

• Events

• Element.Event
• MouseEnter
• MouseWheel
• Element.Delegation
• Element.Event.Pseudos

• Request

• Request
• Request.HTML
• Request.JSON

• Plugins

• Accordion
• Slider
• Sortables
• Enhanced Forms

#box { margin: 1em auto; width: 200px; height: 150px; background: #6B7B95; } <h3>Periodical Effects</h3> <a id="start" href="#">start</a> | <a id="stop" href="#">stop</a> <div id="box"></div> window.addEvent('domready', function(){ var effect = new Fx.Tween('box', {duration: 800}), periodical; // Create the function wich will run the effect var fx = function() { effect.start('background-color', '#6B7B95').chain(function(){ effect.start('background-color', '#E79D35'); }); // return this function, so you could do fx() which returns fx, //or fx()()() which still returns fx and runs the function 3 times return fx; }; $('start').addEvent('click', function(event){ event.stop(); // We call the fx function once directly, which returns the fx function again, and set the periodical to 1.7 seconds // We store the reference to the peridical in the peridical, so we can stop it later periodical = fx().periodical(1700); }); $('stop').addEvent('click', function(event){ event.stop(); // With the JavaScipt function clearInterval we can stop the interval clearInterval(periodical); }); });

• Demo
• Edit with jsFiddle
• Docs
• CSS
• HTML
• JavaScript