"fx"
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"fx"
queuejQuery.queue( elem, type, data )
Run the first function stored the queue
jQuery.fn.dequeue( [ type ] )
jQuery.dequeue( elem, [ type ] )
shift()
's a function off the queuejQuery.dequeue()
fn.call( elem, function() {
jQuery.dequeue( elem, type );
});
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 );
});
}
.animate()
new jQuery.fx( elem, options, property )
jQuery.timers
arrayjQuery.fx
off
- set to false to make all animations have 0 durationstep
- Stores functions to allow "hooks" per property
speeds
- Stores default speeds { slow: 600, fast: 200, _default: 400 }
interval
- delay between frames - defaults to 13tick()
- Loops over jQuery.timers
- Removing as they completestop()
- clearInterval()
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
swing
and linear
function ( position, time, min, max, duration )
jQuery.speed()
( speed, easing, callback )
duration
- normalized to a numbercomplete
- normalized to call callback, then dequeueeasing
queue
- Name of the queue to use (1.7), or false to disable queuestep
- Overrides the default "step" functionjQuery.fn.animate()
jQuery.fn.animate( prop, speed, easing, callback )
options = jQuery.speed( speed, easing, callback )
doAnimation
.queue( type, doAnimation )
or .each( doAnimation )
doAnimation
Called for each element - Loops over all properties
{ prop: [ value, easing ] }
"show"
"hide"
and "toggle"
call appropriate function on the timer.custom
method on the timer.jQuery.fn.stop()
( clearQueue, gotoEnd )
(queue option 1.7+)clearQueue
jQuery.timers
related to the element and queue.gotoEnd
- call the timers with gotoEnd
to force the last framedelay: 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 );
};
});
},
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);
addClass()
, removeClass()
and toggleClass()
elem.addClass( "testing", 200 );
.hide( "effect", duration, easing, callback )
, also show, toggle