Â鶹Éç

Methods

css

Animates CSS properties of an element.

Synopsis

glow.anim.css(element, duration, spec, opts);

Parameters

element

Type

| glow.dom.NodeList |

Element to animate.

This can be a CSS selector (first match will be used), glow.dom.NodeList (first node will be used), or a DOM element.

duration

Type

Animation duration, in seconds by default.

spec

Type

An object describing the properties to animate.

This object should consist of property names corresponding to the CSS properties you wish to animate, and values which are objects with 'from' and 'to' properties with the values to animate between or a number/string representing the value to animate to.

If the 'from' property is absent, the elements current CSS value will be used instead.

See the spec example below for more information.

opts

Type

Optional options object.

tween

The way the value moves through time. See glow.tweens.

Type

Default

linear tween

Optional

Yes

useSeconds

Specifies whether duration should be in seconds rather than frames.

Type

Default

true

Optional

Yes

Returns

glow.anim.Animation

Example

// an example of an spec object
{
  "height": {from: "10px", to: "100px"},
  "width": "100px",
  "font-size": {from: "0.5em", to: "1.3em"}
}

// animate an elements height and opacity to 0 from current values over 1 second
glow.anim.css("#myElement", 1, {
  "height" : {to:0},
  "opacity" : {to:0}
}).start();

fadeIn

Fade in a NodeList by the default duration of 0.5 seconds.

Synopsis

glow.anim.fadeIn(selector, duration, opts);

Parameters

selector

Type

NodeList

duration

Type

fade in duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.fadeIn(myNodeList);

fadeOut

Fade out a NodeList by the default duration of 0.5 seconds.

Synopsis

glow.anim.fadeOut(selector, duration, opts);

Parameters

selector

Type

CSS selector

duration

Type

fade out duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.fadeOut(myNodeList);

fadeTo

Fade a NodeList to a set opacity by the default duration of 0.5 seconds.

Synopsis

glow.anim.fadeTo(selector, opacity, duration, opts);

Parameters

selector

Type

NodeList

opacity

Type

fade to opacity level between 0 & 1.

duration

Type

fadeTo duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.fadeTo(myNodeList);

highlight

Highlight a NodeList background colour from default (#ffff99) to the

Synopsis

glow.anim.highlight(selector, highlightColour, duration, opts);

Parameters

selector

Type

NodeList

highlightColour

Type

highlight colour in hex (default is #ffff99).

duration

Type

highlight duration, in seconds by default.

opts

Type

Object

completeColour

The background colour of the element once the highlight is complete.

Type

Optional

Yes

If none supplied Glow assumes the element's existing background color (e.g. #336699), if the element has no background color specified (e.g. Transparent) the highlight will transition to white and reset the element to transparent once all the NodeList highlights have completed

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Description

element's original color at the default duration of 0.5 seconds.

Example

glow.anim.highlight(myNodeList);

slideDown

Slide a NodeList down from a height of 0 by the default duration of 0.5 seconds.

Synopsis

glow.anim.slideDown(selector, duration, opts);

Parameters

selector

Type

CSS selector

duration

Type

slide up duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.slideDown(myNodeList);

slideToggle

Toggle a NodeList Up or Down depending on it's present state by the default duration of 0.5 seconds.

Synopsis

glow.anim.slideToggle(selector, duration, opts);

Parameters

selector

Type

CSS selector

duration

Type

slide duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.slideToggle(myNodeList);

slideUp

Slide a NodeList up to a height of 0 by the default duration of 0.5 seconds.

Synopsis

glow.anim.slideUp(selector, duration, opts);

Parameters

selector

Type

CSS selector

duration

Type

slide up duration, in seconds by default.

opts

Type

Object

onComplete

The function to be called when the first element in the NodeList completes the animation.

Type

Optional

Yes

onStart

The function to be called when the first element in the NodeList starts the animation.

Type

Optional

Yes

tween

The way the value moves through time. See glow.tweens.

Type

Default

easeBoth tween

Optional

Yes

Example

glow.anim.slideUp(myNodeList);

Classes

Animation

Controls modifying values over time.

Timeline

Synchronises and chains animations.