When using the mootools shortcut

var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.Sine.easeInOut});

that is always creating a new Fx.Styles instance, I decided to build a cache object.

What it does is returns a new Fx.Styles if none is found for the html element passed to the create method, caching it, for later reference.

var fxCache = {    cache:{},    options:{duration:300,transition:Fx.Transitions.Circ.easeInOut},    create: function (element,options)    {        element = $(element);        if (this.cache[element.id] == null)        {            return this.cache[element.id]=element.effects($merge.apply(null, [this.options].extend(options||{})));        }        else        {            return this.cache[element.id];        }    }}

Simply use it like so:

var fxA = fxCache.create("myHtmlElement",{"duration":600});var fxB = fxCache.create($("otherHtmlElement"));