Web development

Mootools Fx.Index v1.0

At work I needed to perform an animation on a sprite-based image (e.g. one large image containing multiple stages within an animation, pre-rendered). Since there was no easy way within Mootools to iterate over an array of class names, I created one. I called it “Fx.Index”, but if you have a better name for it, please leave me a comment.

Fx.Index = Fx.Base.extend({
initialize: function(el, css_classes, options) {
this.element = $(el);
this.css_classes = css_classes;
this.parent(options);
this.previous_index = null;
},
increase: function() {
var index = this.now.toInt();
if (this.previous_index == index)
return;
this.previous_index = index;
var klass = this.css_classes[index];
if ($chk(this.options.classBase))
klass += " " + this.options.classBase;

this.element.className = klass;
}
});

This code is taken straight from our product, which uses Mootools 1.11. So I’ll post an update once I port it to Mootools 1.2, at which point I’ll submit it to be added in the not-yet-created plugin directory.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.