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

Corey Frang

jQuery UI Team

github / twitter
@gnarf37
IRC
gnarf

Overview

queue.js Simple Queues

jQuery Core

/src/queue.js

What is a queue?

Queues have names

Queue

Add a function to the end of the queue

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

Dequeue

Run the first function stored the queue

jQuery.fn.dequeue( [ type ] ) jQuery.dequeue( elem, [ type ] )
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

jQuery Core

/src/effects.js

What is a timer?

jQuery.fx
Internal Properties and Methods

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

jQuery.speed()
Internal Options Helper

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

doAnimation

Called for each element - Loops over all properties

jQuery.fn.stop()

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

/ui/jquery.effects.core.js

jQuery UI Effects?

Effects Library

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

Queued toggling

How can make this better?

#