MooTools - Fx.Events
Fx.Events 提供了一些选项，用于在整个动画效果的不同级别上引发一些代码。它为您提供了对补间和变形的控制。Fx.Events 提供的选项 −
onStart − 它将引发 Fx 启动时执行的代码。
onCancel − 它将引发 Fx 取消时执行的代码。
onComplete − 它将引发 Fx 完成时执行的代码。
onChainComplete −将在链接的 Fx 完成时引发要执行的代码。
示例
让我们举一个例子，其中网页上有 div。我们继续将事件方法应用于 div。第一个方法是 onStart() 方法，当鼠标指针进入 div 区域时突出显示 div。
第二个是 onComplete() 方法，当鼠标指针离开 div 区域时突出显示 div。当鼠标指针自动进入 div 区域时，div 大小会增加 400px。我们将尝试使用 Fx.Events 方法执行所有这些功能。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
#quadin {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadinout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var enterFunction = function() {
this.start('width', '400px');
}
var leaveFunction = function() {
this.start('width', '200px');
}
window.addEvent('domready', function() {
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
$('quadin').addEvents({
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
</script>
</head>
<body>
<div id = "quadin"> Quad : in</div><br/>
<div id = "quadout"> Quad : out</div><br/>
<div id = "quadinout"> Quad : in-out</div><br/>
</body>
</html>
您将收到以下输出 −
