I’m officially announcing moo.fx 1.2! The biggest improvement? Documentation.

Accordion effect, custom transition, a number of bugfixes (including opacity for safari) and a lot more!

moo.fx changelog

Each effect element will now support another option: transition: fx.TRANSITIONNAME. With this you can choose wich transition to use: from fast to slow, from slow to fast, start slow then fast then slow again, even a linear one, for older computers. You can get a list of available transitions at the end of moo.fx.js (simple ones) and moo.fx.pack.js (a lot more).

Opacity for safari is now fixed. The Opacity effect has also another method now: setOpacity. It’s used to suddenly set the opacity, crossbrowser, without displaying the effect. It will also hide/show the element when opacity=0/1, a quick fix for browsers not supporting opacity on elements (OPERA).

The new moo.fx is completely safe to update, all your effects will still work.

moo.fx.pack changelog

Here a lot more has changed. I decided to replace a lot of stuff with better stuff. If you need the old stuff you can always include that stuff in the new files, or just don’t update moo.fx.pack. Too much stuff would have been bad for filesize. stuff.

The best thing is the new fx.Accordion: forget about fx.Multi, for loops and headhaches. You can now generate accordions in just one line of code! This new effect takes as parameters two arrays, one for the switches (the elements you click on) and one for the elements to be expanded/collapsed. A nice way to do this is with classNames, using document.getElementsByClassName from prototype. For a more detailed explanation, go read the docs!

fx.Fadesize and fx.Resize are no more. Why all this when you can make your own combination of height/width/opacity with fx.Combo? just set as options width: true, height: true or opacity: true. The default is the combination of height and opacity.

fx.Scroll is now a part of the family!

Smallest improvements

A lot of smallest stuff has changed too. For example, if you’re a code reader you’ll notice there are no more for loops. I’ve made a simple and effective function (at least for me!) to avoid for loops. I hate for loops. This function extends the Array object, adding a method (each.) This is the usage:

myArray.each(function(element){
    element.style.color: "red";
});

This will make any element of the array myArray red. Easier to read!

Another small thing is the function I’ve added to prototype.lite: Element.find. It takes as parameter what to find (nextSibling/previousSibling), and the element. It will return the real element, discarding any text-nodes. This eliminates the need to use Element.clearWhitespace everytime you want to perform such operations.

Frequently asked questions

These days I’m receiving a lot of support requests and I can’t answer them all. So I’m writing a faq for moo.fx/moo.fx.pack. If you have any questions you wold like too see in the faq, please ask!

UPDATE: Opera 9 PR2 now supports opacity! Yay!

UPDATE2: moo.fx.js is now 1.2.1. The previous version brake Sean McBride version of lightbox (very cool btw) due to a visibility issue. This should fix the problem. Thanx Sean!