mootools
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
最近，我被迫创建一个MooTools插件，该插件将一个元素并在给定的次数内将其淡入最大值。 这是我的愚蠢行为的结果。
View Demo
观看演示
MooTools JavaScript (The MooTools JavaScript)
var PulseFade = new Class({
//implements
Implements: [Options,Events],
//options
options: {
min: 0,
max: 1,
duration: 200,
times: 5
},
//initialization
initialize: function(el,options) {
//set options
this.setOptions(options);
this.element = $(el);
this.times = 0;
},
//starts the pulse fade
start: function(times) {
if(!times) times = this.options.times * 2;
this.running = 1;
this.fireEvent('start').run(times -1);
},
//stops the pulse fade
stop: function() {
this.running = 0;
this.fireEvent('stop');
},
//runs the shizzle
run: function(times) {
//make it happen
var self = this;
var to = self.element.get('opacity') == self.options.min ? self.options.max : self.options.min;
self.fx = new Fx.Tween(self.element,{
duration: self.options.duration / 2,
onComplete: function() {
self.fireEvent('tick');
if(self.running && times)
{
self.run(times-1);
}
else
{
self.fireEvent('complete');
}
}
}).start('opacity',to);
}
});
Options of the class include:
该类的选项包括：
min: (defaults to .5) the minimum opacity level
最小值：( 默认值为0.5)最小不透明度
max: (defaults to 1) the maximum opacity level
max ：( 默认为1)最大不透明度
duration: (defaults to 200) the length of time of the fade
持续时间：( 默认为200)淡入时间的长度
times: (defaults to 5) the number of times the fade in/out should occur
times ：( 默认为5)淡入/淡出应该发生的次数
Events of the class include:
班级活动包括：
onComplete
onComplete
on Start
在开始
on Stop
停止
onTick - Fires every time the fade reaches the fade reaches the min or max.
onTick-每次淡入淡入达到最小值或最大值时触发。
样品用量 (Sample Usage)
window.addEvent('domready',function() {
var pf = new PulseFade('pulse-fade',{
min: .50,
max: 1,
duration: 400,
onComplete: function() {
alert('complete!');
},
onStart: function() {
alert('started!');
},
onStop: function() {
alert('stopped!');
},
onTick: function() {
alert('tick!');
}
})
$('stop-link').addEvent('click',function(e) { e.stop(); pf.stop(); });
$('start-link').addEvent('click',function(e) { e.stop(); pf.start(); });
});
View Demo
观看演示
I'm satisfied with the effect by not the class as a whole. MooTools Core Developer and -More csar Aaron Newton frequently reminds me that a class needs to be as flexible and basic as possible. Unfortunately, this isn't as flexible of a class as it could be but it does the job.
我对这种效果感到满意，而不是整个班级。 MooTools核心开发人员和-更多csar Aaron Newton经常提醒我，一个类需要尽可能灵活和基本。 不幸的是，这并不是一个类的灵活性，但是它确实可以做到。
翻译自: https://davidwalsh.name/mootools-pulsefade-plugin
mootools
