JSTags: grow effect tag

Description

This tag provides an easy way to make an element change its size.

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 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.
direction The direction in which the element will grow. center false top-left.
top-right.
bottom-left.
bottom-right.
center.

Note: all of the attributes accept runtime expressions.

Example

Go here to see an example.