dojo/fx.js

• Provides:

  • dojo.fx

• Requires:

  • dojo.fx.Toggler in common

• • type

    Function

• dojo.fx

  • summary

    Effects library on top of Base animations

  • type

    Object

• dojo

  • alias - dojo

• dojo.fx.chain

  • parameters:
    • animations: (typeof dojo.Animation[])
  • returns

    dojo.Animation

  • summary

    Chain a list of <code>dojo.Animation</code>s to run in sequence

  • description

    Return a `dojo.Animation` which will play all passed
    `dojo.Animation` instances in sequence, firing its own
    synthesized events simulating a single animation. (eg:
    onEnd of this animation means the end of the chain,
    not the individual animations within)

  • example

    Once `node` is faded out, fade in `otherNode`
    	dojo.fx.chain([
    		dojo.fadeIn({ node:node }),
    		dojo.fadeOut({ node:otherNode })
    	]).play();

  • type

    Function

• dojo.fx.combine

  • parameters:
    • animations: (typeof dojo.Animation[])
  • returns

    dojo.Animation

  • summary

    Combine a list of <code>dojo.Animation</code>s to run in parallel

  • description

    Combine an array of `dojo.Animation`s to run in parallel,
    providing a new `dojo.Animation` instance encompasing each
    animation, firing standard animation events.

  • example

    Fade out `node` while fading in `otherNode` simultaneously
    	dojo.fx.combine([
    		dojo.fadeIn({ node:node }),
    		dojo.fadeOut({ node:otherNode })
    	]).play();

  • example

    When the longest animation ends, execute a function:
    	var anim = dojo.fx.combine([
    		dojo.fadeIn({ node: n, duration:700 }),
    		dojo.fadeOut({ node: otherNode, duration: 300 })
    	]);
    	dojo.connect(anim, "onEnd", function(){
    		// overall animation is done.
    	});
    	anim.play(); // play the animation

  • type

    Function

• dojo.fx.wipeIn

  • parameters:
    • args: (typeof Object)

      A hash-map of standard <code>dojo.Animation</code> constructor properties
      (such as easing: node: duration: and so on)

  • returns

    dojo.Animation

  • summary

    Expand a node to it's natural height.

  • description

    Returns an animation that will expand the
    node defined in 'args' object from it's current height to
    it's natural height (with no scrollbar).
    Node must have no margin/border/padding.

  • example

    	dojo.fx.wipeIn({
    		node:"someId"
    	}).play()

  • type

    Function

• dojo.fx.wipeOut

  • parameters:
    • args: (typeof Object)

      A hash-map of standard <code>dojo.Animation</code> constructor properties
      (such as easing: node: duration: and so on)

  • returns

    dojo.Animation

  • summary

    Shrink a node to nothing and hide it.

  • description

    Returns an animation that will shrink node defined in "args"
    from it's current height to 1px, and then hide it.

  • example

    	dojo.fx.wipeOut({ node:"someId" }).play()

  • type

    Function

• dojo.fx.slideTo

  • parameters:
    • args: (typeof Object)

      A hash-map of standard <code>dojo.Animation</code> constructor properties
      (such as easing: node: duration: and so on). Special args members
      are <code>top</code> and <code>left</code>, which indicate the new position to slide to.

  • returns

    dojo.Animation

  • summary

    Slide a node to a new top/left position

  • description

    Returns an animation that will slide "node"
    defined in args Object from its current position to
    the position defined by (args.left, args.top).

  • example

    	dojo.fx.slideTo({ node: node, left:"40", top:"50", units:"px" }).play()

  • type

    Function