关于动画，Mootools一直都是比较让我喜爱的部分。
当然，更重要的是mootools的面向对象的框架让我更为青睐（过去我一直是在写as,因此我更加习惯这种写法）。
说道Periodical，这个方法。我们可得好好研究下。随着学习的深入，在mootools中应用还是大有用途。
我们以这个例子来说明下Periodical的应用。
先给出源码，方便大家调试与理解：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#box {
margin: 1em auto;
width: 200px;
height: 150px;
background: #6B7B95;
}
</style>
</head>
<body>
<h3>Periodical Effects</h3>
<a id="start" href="#">start</a> | <a id="stop" href="#">stop</a>
<div id="box"></div>
<script src="mootools-core-1.4.3-full-nocompat.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var effect = new Fx.Tween('box', {duration: 200}),
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(800);
});
$('stop').addEvent('click', function(event){
event.stop();
// With the JavaScipt function clearInterval we can stop the interval
clearInterval(periodical);
});
})
</script>
</body>
</html>
在这些代码里面，我们就说说js部分：
首先，domready时，我们加载这个funciton.
window.addEvent('domready', function(){}）
接下来，我们就要给出function内具体的内容了。
var effect = new Fx.Tween('box', {duration: 200}),
periodical;
// 定义动画
var fx = function() {
effect.start('background-color', '#6B7B95').chain(function(){
effect.start('background-color', '#E79D35');
});
//返回 fx,
return fx;
};
//定义start 按钮上的click 事件
$('start').addEvent('click', function(event){
event.stop();
// 定义periodical的间隔为0.8秒
// 定义了periodical
periodical = fx().periodical(800);
});
//定义stop按钮上的click事件
$('stop').addEvent('click', function(event){
event.stop();
// 清除periodical动画
clearInterval(periodical);
其实归根结底periodical还是比较简单：function.periodical({interval})
如果要清除：clearInterval(periodical)
希望对大家的理解有所帮助。
