script.aculo.us---Core Effects

The six core effects Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight and Effect.Parallel are the foundation of the script.aculo.us Visual Effects Java Script library.

Syntax
The basic syntax to start an effect is:

  new Effect.EffectName( element, required-params, [options] );

Common parameters 通用参数
All core effects support following settings in their options parameter:所有核心效果都支持这些参数！V1.0代表支持的版本

Option since Description
duration V1.0 Duration of the effect in seconds, given as a float. Defaults to 1.0.
fps V1.0 Target this many frames per second. Default to 25. Can’t be higher than 100.
transition V1.0 Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble and Effect.Transitions.flicker.
from V1.0 Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0.
to V1.0 Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0.
sync V1.0 Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().
queue V1.5 Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:’front/end’, scope:’scope’, limit:1}. For more info on this, see Effect Queues.
delay V1.5 Sets the number of seconds to wait before the effect actually starts. Defaults to 0.0.
direction ?? Sets the direction of the transition. Values can be either ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ or ‘center’ (Default). Applicable only on Grow and Shrink effects.



Additionally, the options parameter also can be supplied with callback methods, so you can have Java Script executed at various events while the effect is running. The callbacks are supplied with a reference to the effect object as a parameter. Here is an example of getting the element id passed by reference into a callback function:

Callback since Description
beforeStart V1.0 Called before the main effects rendering loop is started.
beforeUpdate V1.0 Called on each iteration of the effects rendering loop, before the redraw takes places.
afterUpdate V1.0 Called on each iteration of the effects rendering loop, after the redraw takes places.
afterFinish V1.0 Called after the last redraw of the effect was made.

Within the effect object, there are several useful variables you can access:

Variable since Description
effect.element V1.0 The element the effect is applied to.
effect.options V1.0 Holds the options you gave to the effect.
effect.currentFrame V1.0 The number of the last frame rendered.
effect.startOn, effect.finishOn V1.0 The times (in ms) when the effect was started, and when it will be finished.
effect.effects[] V1.0 On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of.

Example usage of Callback functions

function myCallBackOnFinish(obj){
  alert("the Element's id the effect was applied to is :" + obj.element.id);
}
function myCallBackOnStart(obj){
  alert("the Element object the effect will be applied to is :" + obj.element);
}
  new Effect.Highlight(myObject, 
    { startcolor:'#ffffff',
      endcolor:'#ffffcc',
      duration: 0.5,
      afterFinish: myCallBackOnFinish,
      BeforeStart: myCallBackOnStart });

http://wiki.script.aculo.us/scriptaculous/show/CoreEffects
Effects Treasure Chest 更多效果百宝箱？
http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest