I've extended Fx.Elements to create a class Fx.Elements.Presets. This
works with elements of a Hash, Fx.Presets, to preset 'sets' of related
animations. There is more detailed information at

http://www.mooforum.net/scripts12/presets-preset-animations-for-elements-t1001.html

and

http://yetagain.net/fxpresets/

but briefly it means that you can pass more meaningful parameters to
the start method of Fx.Elements. If you wanted to create a 'highlight'
preset that makes the background of specific element black, while all
others white, you would construct a Preset by:

var highlight = new Fx.Preset(Fx.Presets.Unique, [
  {'background-color': '#ffffff'},
  {'background-color': '#000000'}
]);

and create the Fx.Elements.Preset object by:

var fx = new Fx.Elements.Preset(elements);

and then highlight the ith element by:

fx.start(highlight, i);

You can also be fancy and 'combine' presets: useful if you want to
have a single Fx.Elements instance that contains two logically
distinct sets of elements, that you want to always animate
differently, but at the same time. With the standard Fx.Elements you
can either:

- Construct two Fx.Elements instances, and call .start on each for
animation. Not ideal as there are essentially two internal periodical
'chains' for each animation. Also there will be multiple 'complete'
events for what is essentially one animation.

- Have one Fx.Elements instance for each set of elements, but mess
around with the integer keys in the object to pass to the
Fx.Elements::start method, to get the right set animating correctly.

Fx.Elements.Preset offers a 3rd way. Say at the same time as the
background change above, you want to change the opacity of an element
*in another set* to 1, and all others to 0. Lets call that set
'contents'

var combinedFx = new Fx.Elements.Preset([elements, contents]);
var reveal = new Fx.Preset(Fx.Presets.Unique, [{opacity:1},{opacity:
0}]);

The ith element can be highlighted, and the ith contents revealed (and
all others lowlighted/hidden) by:

combinedFx.start([highlight, reveal], i);

Above I used Fx.Presets.Unique, but I have also constructed
Fx.Presets.All to act on all elements in the same way, and
Fx.Elements.Grid to act on elements depending on their x and y
coordinates in a grid of elements. New members of Fx.Presets can also
be constructed relatively easily. Each member of Fx.Presets allows:

- Custom parameters that can be passed during instantiation of the
preset (in the examples above these were the properties to animate)
- Custom parameters passed via the 'start' method (in the example
above this was always an integer index).

Any comments/suggestions/criticisms very appreciated. As I mention in
the mooforum post, this includes a better naming scheme! Also
suggestions for better syntax, as I just don't know what's best.

Also, I hope it's ok to essentially cross-post between here and
mooforum: I'm just not sure if everyone reads both.

Michal.

Reply via email to