introduction

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

It's very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won't let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

moo.fx is open source, released under the very liberal MIT License, so feel free to do anything you want with it.

what's new

moo.fx2 Introduces a lot of new stuff: beginning with Fx.Style, to modify any chosen CSS property, then Fx.Styles, to modify any number of CSS properties at once. Those two are the most powerful effects, and if you're hardcore enough, the ones you'll ever need. They are infact included in the basic package, moo.fx.js.

Then in moo.fx.pack we have Fx.Color, to modify the color properties of your elements and Fx.Scroll, to internally scroll your long divs.

A completely rewritten Accordion has its own script now, with multiple options to let you decide every aspect of it.

For the nostalgics there is even moo.fx.utils, containing Fx.Height, Fx.Width and Fx.Opacity. moo.fx.utils is only useful if you want to toggle your values, and toggle only works with no padding/margin/borders, and in a strict doctype.

If it werent enough, moo.fx is now fully compatible with Robert Penner Easing equations, so there's also moo.fx.transitions in the package. Use it if you like to give your page a more personalized look!

get help, give help

All documentation for the effect classes can be found in the mootools documentation.

Is that a forum that you want? Head to mootools forum.

Want to help moo.fx development? Submit content to the wiki, write me and express your thoughts, or report bugs, suggest features, be our friend in the forum!

moo.fx2 introduces a radical architecture change. Scripts written for older versions might not work on v2. If you need the old version, you can get it here.

download

moo.fx can be downloaded in two flavors: for prototype.js or for mootools. Choose the best one for you.

Keep in mind that moo.fx for prototype only works with prototype.js or my alternative, prtotype.lite.js, for those who want only effects.

moo.fx for mootools can be downloaded directly from the mootools download page. You can get a lot more from there, drag and drop, ajax, cool elements extensions, and you have the option to get your script compressed, to save even more bandwidth.

Also note: the mootools version also support effects chainability and a new Effect, Fx.Slide.

get moo.fx for mootools

STEP 1: DOWNLOAD

You can go directly to the mootools download page and build your own customized download! There's a lot more in there, Ajax, Drag, Dom. Just Choose the best setup for you.

STEP 2: INCLUDE

Include the single javascript file, mootools.js in your page.

get moo.fx for prototype

STEP 1: DOWNLOAD

Included in the download you'll find all the scripts. The only required script is moo.fx.js, along with either prototype.lite.js or the full prototype.js.

STEP 2: INCLUDE

include the scripts in the following order:

  1. prototype.js or prototype.lite.js (required)
  2. moo.fx.js (required)
  3. moo.fx.pack.js (optional)
  4. moo.fx.utils.js (optional)
  5. moo.fx.accordion.js (optional)
  6. moo.fx.transitions.js (optional)

text-link-ads : make money with text links!