The resize effect will change the size of the selected node from its current width and height to a new width and height over a time frame and step size.
note: :curwidth and :curheight can be used for either width or height to keep the current width or height even when the exact value is not known.
(resize width height) ;or (resize width height total-time) ;or (resize width height total-time (fn callbk [node] ..)) ;or (resize width height total-time (fn callbk [node] ..) accelerator)
Example:
The following action is triggered when we click the button
(em/defaction resize-demo [] "#rz-demo" (em/resize 200 :curheight 500 (em/resize 5 :curheight 500)))
Notice in the above example, I am using the callback to call another resize transform.
The move effect will change the location of the selected node from its current position to a new postion over a time frame and step size. Currently this effect only supports fixed or absolute positioned object.
note: :curx and :cury can be used to keep the current x or y even when the exact value is not known
(move x y) ;or (move x y total-time) ;or (move x y total-time (fn callbk [node] ..)) ;or (move x y total-time (fn callbk [node] ..) accelerator)
Example:
The following action is triggered when we click the button
(em/defaction move-demo [] "#mv-demo" (em/move 300 :cury 500 (em/move -20 :cury 500)))
Notice in the above example, I am using the callback to call another move transform.
The fade effects will change current opacity of the selected nodes from their current opacity to 0 and 1, respectively, over a specific time frame and step size.
Note: There are plans to replace fade-in and fade-out, with a change-opacity effect, so use with caution.
(fade-in total-time) ;or (fade-in total-time (fn callbk [node] ..)) ;or (fade-in total-time (fn callbk [node] ..) accelerator)
Example:
The following action is triggered when we click the button
(em/defaction fade-demo [] "#fade-demo" (em/fade-out 500 (em/fade-in 500)))
Notice in the above example, I am using the callback of fade-out to call another fade-in transform.
The delay effects schedule the transform to be performed a certain number of milliseconds in future.
(delay time transform)
Example:
The following action is triggered when we click the button
(em/defaction delay-demo [] "#delay-demo" (em/do-> (em/resize 200 :curheight 500) (em/delay 2000 (em/resize 50 :curheight 500))))
The chain effect will take a set of asynchronous effects and chain them together synchronously, so one effect will start after the previous effect has finished.
(chain (effect ...) (effect ...))
Example:
The following action is triggered when we click the button
(em/defaction chain-demo [] "#chain-demo" (em/chain (em/resize 200 :curheight 500) (em/resize 5 :curheight 500)))