JSTags: toggle effect tag

Description

This tag allows toggling elements with an appear, blind, size or slide effect. The element it is applied to, will switch its state between appear/fade, blind up/blind down, grow/squish and slide up/slide down depending on the type of effect chosen.

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 codeonload/code 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 100 25 false integer.
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.
effect true appear.
blind.
size.
slide.
delay How many seconds will pass before the effect starts executing. 0.0 false float higher than or equals to 0.0.

Note: all of the attributes accept runtime expressions.

Example

Go here to see an example.