Special.fx() _{A review of jQuery animation one requestAnimationFrame at a time}

Overview

• jQuery Core

  • Queues
  • Timers
  • Animate
  • Shortcuts

• jQuery UI Effects

  • Animate Classes
  • Widget Effects
  • Also Includes
    • jQuery Color
    • Additional Easing

queue.js _{Simple Queues}

What is a queue?

• Stored per Element or Object
  • Uses jQuery internal data cache
• Stores Functions
• First in, First Out
• Has uses other than animation

Queues have names

• The default is "fx"
  • Automatically starts

Queue

Add a function to the end of the queue

jQuery.fn.queue( [ type, ] queueFunc( next ) )

• queueFunc( next ) is passed a function to call when you are done
• Automatically starts the "fx" queue
• Internally it calls....

jQuery.queue( elem, type, data )

• Stores the function on the end of the queue
• Can accept an array of functions - in which case it overwrites the queue
• Accepts no data to retrieve the queue

Dequeue

Run the first function stored the queue

jQuery.fn.dequeue( [ type ] )

• Just passes all the work to...

jQuery.dequeue( elem, [ type ] )

• shift()'s a function off the queue
• Executes your function, passing a function to call jQuery.dequeue()

fn.call( elem, function() {
    jQuery.dequeue( elem, type );
});

Example Queue Function

A good example already in queue.js

jQuery.fn.delay( time, [ type ] )

delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
    type = type || "fx";

    return this.queue( type, function( next ) {
        setTimeout( next, time );
    });
}

effects.js _{Timers & Animations}

What is a timer?

• Used internally to track the state of animation
• Per property
• Created inside .animate()
new jQuery.fx( elem, options, property )
• After creation, pushes a function to jQuery.timers array
• Defines functions to set/get property that is being animated

jQuery.fx
Internal Properties and Methods

• Public Stuff
  • off - set to false to make all animations have 0 duration
  • step - Stores functions to allow "hooks" per property
    • opacity - forces using jQuery.style instead of fx.elem.style
    • width/height - don't allow negative numbers
  • speeds - Stores default speeds
    { slow: 600, fast: 200, _default: 400 }
• Internal Stuff
  • interval - delay between frames - defaults to 13
  • tick() - Loops over jQuery.timers - Removing as they complete
  • stop() - clearInterval()

An example step function

Copied from jQuery Color 2.0b1 - defines step hooks for color animation

// hook = backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor
// color outlineColor
jQuery.fx.step[ hook ] = function( fx ) {
    if ( !fx.colorInit ) {
        fx.start = color( fx.elem, hook );
        fx.end = color( fx.end );
        fx.colorInit = true;
    }
    jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
};

jQuery.easing
Easing functions

• By default provides swing and linear
• function ( position, time, min, max, duration )
  • position from 0.0 -> 1.0
  • time is ms from start
  • min and max might have been used once, but are now always 0 -> 1
• Further extended by other plugins

jQuery.speed()
Internal Options Helper

• Takes the possible arguments for ALL animation functions
  ( speed, easing, callback )
• speed can be an "options object" to start with
• Returns an animation "options object"
  • duration - normalized to a number
  • complete - normalized to call callback, then dequeue
  • easing
• Other valid options not given a named parameter
  • queue - Name of the queue to use (1.7), or false to disable queue
  • step - Overrides the default "step" function

jQuery.fn.animate()
One interface to rule them all

• jQuery.fn.animate( prop, speed, easing, callback )
• options = jQuery.speed( speed, easing, callback )
• Defines a function that will begin the animation: doAnimation
• Calls .queue( type, doAnimation ) or .each( doAnimation )

doAnimation

Called for each element - Loops over all properties

• Normalize names (camelCase)
• Per-Property Easing { prop: [ value, easing ] }
• Creates a timer
• "show" "hide" and "toggle" call appropriate function on the timer.
• All others, calculate current/end values and call the custom method on the timer.

jQuery.fn.stop()

• ( clearQueue, gotoEnd ) (queue option 1.7+)
• Empties the queue if clearQueue
• Stops (removes) all jQuery.timers related to the element and queue.
• When gotoEnd - call the timers with gotoEnd to force the last frame
• 1.7 - Calls stop handle of currently running queue functions too

Now in 1.7...

delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
    type = type || "fx";

    return this.queue( type, function( next, runner ) {
        var timeout = setTimeout( next, time );
        runner.stop = function() {
            clearTimeout( timeout );
        };
    });
},

Animation Helpers / Shortcuts

hide, show, toggle,
slideDown, slideUp, slideToggle,
fadeIn, fadeOut, fadeToggle

Creates function that call animate() using specific properties

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx( "show", 1 ),
    slideUp: genFx( "hide", 1 ),
    slideToggle: genFx( "toggle", 1 ),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" },
    fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        return this.animate( props, speed, easing, callback );
    };
});

hide, show and toggle all contain a similar line of code:

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

jquery.effects.core.js _{jQuery UI Effects}

jQuery UI Effects?

• Standalone
• Adds animation to addClass(), removeClass() and toggleClass()
elem.addClass( "testing", 200 );
• Effects Library
• Bakes in:
  • Color _{(v2 in beta)}
  • Easing Functions

Effects Library

• Main use is for the hide and show of widgets
• Can be used with .hide( "effect", duration, easing, callback ), also show, toggle
• Some major refactoring in 1.9

Effects Library

Class Animation or CSS3 Transitions?

A WTF Text Demo

_{Thanks to Ben "Cowboy" Alman for the demo. Thanks to slipsum.com for the Samuel L Ipsum}

requestAnimationFrame

• We all like it
• But we hate the bug!

Queued toggling

How can make this better?

• Core 1.8 Animation Refactoring