Namespace: Anim

WJBRYANT. Anim

The WJBRYANT.Anim namespace contains methods to animate Elements.
Source:

Methods

<static> fade(elem, options) → {Object}

Fades an element to and from any color.
Parameters:
Name Type Argument Description
elem Element the element to be animated
options Object <optional>
an object containing members specifying the animation options

Valid members of this object are:
{string[]} [properties=['backgroundColor']]  the style properties to animate. These are written
                                             in camelCase. Be careful to specify properties that
                                             only define a color, such as 'borderColor' instead
                                             of just 'border', because the property value will
                                             be overwritten when it is set to the new color.

{string}   [from='#ffff66']                  the hex value to start at

{string}   [to='#ffffff']                    the hex value to end at

{number}   [dur=1500]                        the duration of the animation in milliseconds
{Function} [callback]                        the function to be executed when the animation is
                                             finished. This function is executed in the context
                                             of the element.
Source:
Returns:
an object with an "end" method that sets all properties to the final color and ends the animation
Type
Object

<static> makeSlideshow(target, sources, delay) → {Object}

Creates a slideshow that continuously replaces the target image element with a new image from the list of sources every time the delay elapses.
Parameters:
Name Type Description
target Element the image element this slideshow will replace
sources string[] the paths to each image in the slideshow
delay number the time in milliseconds to wait between changing slides
Source:
Returns:
an object with "start" and "stop" methods used to control the slideshow
Type
Object

<static> move(elem, options) → {Object}

Moves an element from one position to another.
Parameters:
Name Type Argument Description
elem Element the element to be moved
options Object <optional>
an object containing members specifying the animation options

Valid members of this object are:
{number[]} [from=curr. pos. || [0, 0]]  the starting position in [x, y]

{number[]} [to=[0, 0]]                  the ending position in [x, y]

{number}   [dur=400]                    the duration of the animation
                                        in milliseconds (must be > 0)

{Function} [callback]                   the function to be executed when
                                        the animation is finished. This
                                        function is executed in the context
                                        of the element.
Source:
Throws:
if elem is not an Element
Type
Error
Returns:
an object with an "end" method that moves the element to the final position and ends the animation
Type
Object
Example
WJB.Anim.move(document.getElementById('selectBox'), {
    from: [-200, -500],
    to: [35, 50],
    dur: 500,
    callback: function () {
        this.style.display = 'none';
    }
});