/ Published in: JavaScript
usage:
new Fader({
delay: 1000,
elements: $$('h3.blurb')
});
new Fader({
delay: 1000,
elements: $$('h3.blurb')
});
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
var Fader = new Class({ item: 0, delay: 1000, elements: null, interactive: false, initialize: function(opts) { for(var key in opts) { this[key] = opts[key]; } this.elements.each(this.setDefault.bind(this)); if(this.interactive) { this.elements.each(this.makeInteractive.bind(this)); } this.fadeIn(); setInterval(this.swap.bind(this), this.delay); }, fadeOut: function() { this.elements[this.item].fade('out'); }, fadeIn: function() { this.elements[this.item].fade('in'); }, swap: function () { this.fadeOut(); this.item = this.item + 1 >= this.elements.length ? 0 : this.item + 1; this.fadeIn(); }, setDefault: function(el) { el.set(this.tweenable, this.min); }, makeInteractive: function(el) { el.addEvent('click', this.swap.bind(this)); } });