Classes

• API Home
• _global_
• Array
• Jelo
• Jelo.Ajax
• Jelo.Anim
• Jelo.Core
• Jelo.CSS
• Jelo.Dom
• Jelo.DragDrop
• Jelo.Env
• Jelo.Event
• Jelo.JSON
• Jelo.Widget

Namespace Jelo.Anim

Provides animation behaviors. Parts have been adapted from the innovative library Emile, available at http://github.com/madrobby/emile
Defined in: Jelo.Anim.js.

        LINEAR: constant speed throughout the animation
        IN: accelerates
        OUT: decelerates
        BOTH: IN then OUT (different curve from SINE)
        SINE: accelerates then decelerates (default if no easing is specified)
        STRONGIN: accelerates from very slow
        STRONGOUT: decelerates to very slow
        STRONGBOTH: STRONGIN then STRONGOUT
        BOUNCE: hits the endpoint several times, decelerating with each bounce
        BOUNCEPAST: quickly passes the endpoint, then hits the opposite side several times
        SWINGIN: reverses behind the starting point, then accelerates to the endpoint
        SWINGOUT: passes the endpoint, then decelerates to the endpoint
        SWINGBOTH: SWINGIN then SWINGOUT
        ELASTIC: snaps past the endpoint several times
        SPRING: snaps past the endpoint (gentler than ELASTIC)
        WOBBLE: forward, backward, and forward in a single duration

See:

http://fatfreejelo.com/shot/easing-functions/

Parameters:

{Object} c

A configuration object.

{HTMLElement|Array} c.me Optional, Default: document.body

One or more elements to animate.

{String} c.css Optional, Default: ''

Any valid CSS-style string. For example: 'width: 200px; height: 100px;'

{Number} c.duration Optional, Default: 0.48

How many seconds the animation should last.

{Function} c.before Optional

Code to execute before the animation begins.

{Function} c.during Optional

This function will be called during EVERY frame of the animation. You may do other processing here if you wish. Your configuration object is the execution context ("this"), with some modifications. this.duration is in milliseconds instead of seconds, this.easing is the actual easing function instead of the string you supply, and this.percent is a decimal between 0 and 1, indicating how far along this animation is.

{Function} c.after Optional

Code to execute after the animation is complete.

Parameters:

{HTMLElement} element

An element to check for animations.

Returns:

{Boolean} True if the supplied element is currently being animated. False otherwise.

Parameters:

{Number} n

Default duration in seconds) for all future animations where no duration is specified. Animations with explicit durations will ignore this value. Initial default duration is 0.48 seconds.

Parameters:

{Number} n

Target frames per second for all animations. Actual frames per second may be more or less depending on the environment.

Parameters:

{HTMLElement} element

An element to stop animating.

{Boolean} setFinal

True to set the ending value(s) before stopping, false to stop in place.