JSTags: simple-effect effect tag

Description

This tag can be used to create different effects:

  • Appear: the element it is applied to, will appear on the screen.
  • Fade: the element it applies to, will disappear from the screen.
  • Puff: the target element will be swollen while its opacity decreases until it reaches 0 and the target disappears completely from the screen.
  • DropOut: the target element will fall down while its opacity decreases until it reaches 0 and the element disappears.
  • Shake: the element is shaken horizontally.
  • SwitchOff: this effect has a tv-style switch off.
  • Squish: it makes an element reduce its size until it disappears.
  • Fold: the target element disappears by reducing its size: first, the height is reduced and, then, its width.
  • Shrink: it makes an element reduce its size until it disappears.
  • Opacity: the element opacity changes and it gets either more or less opaque.

Tag reference

Attribute name Description Default Required Valid values
shootersSelector String used to select the elements to which the event provided by the event attribute will be attached. If it is not set, the action will be performed as soon as the page is loaded, that is, the onload event of the window. false CSS selector expressions (i.e. div#menubar, .button). You may check MochiKit for further information.
targetId Identifier of the element the effect will be fired on. true
event Event name on which the effect will be fired. true event name (i.e. onclick, onmouseover).
beforeStart Call to the JavaScript function to be executed right before the effect starts. false i.e. myFunction(), myOtherFunction(3).
beforeSetup Call to the JavaScript function to be executed right before the effect is configured. false i.e. myFunction(), myOtherFunction(3).
beforeUpdate Call to the JavaScript function to be executed right before the target element is updated. false i.e. myFunction(), myOtherFunction(3).
afterUpdate Call to the JavaScript function to be executed right after the target element is updated. i.e. myFunction(), myOtherFunction(3).
beforeFinish Call to the JavaScript function to be executed right before the effect finishes. false i.e. myFunction(), myOtherFunction(3).
afterFinish Call to the JavaScript function to be executed right after the effect finishes. false i.e. myFunction(), myOtherFunction(3).
transition Type of transition to be used with the effect. MochiKit.Visual.Transitions.sinoidal false MochiKit.Visual.Transitions.linear.
MochiKit.Visual.Transitions.sinoidal.
MochiKit.Visual.Transitions.reverse.
MochiKit.Visual.Transitions.flicker.
MochiKit.Visual.Transitions.wobble.
MochiKit.Visual.Transitions.pulse.
MochiKit.Visual.Transitions.none.
MochiKit.Visual.Transitions.full.
duration Time (in seconds) the effect will last. 1 false float.
fps Frames per second for the transition. Can't be higher than 25.0. 25.0 false float.
queue {queue: 'parallel' } false i.e.
global: {queue:'end'},
user defined: {queue: {position:'front'}}, {queue: {position: 'front', scope: 'myqueue'}}.
from The starting point of the transition. 0.0 false float between 0.0 and 1.0
to The end point of the transition. 1.0 false float between 0.0 and 1.0
delay How many seconds will pass before the effect starts executing. 0.0 false float higher than or equals to 0.0
type The kind of effect to be performed. true Appear
Fade
Puff
DropOut
Shake
SwitchOff
Squish
Fold
Shrink
Opacity

Note: all of the attributes accept runtime expressions.

Example

Go here to see an example.