effects.*: Updating fade, pulsate, scale, shake to pass units

This commit is contained in:
gnarf 2011-05-01 06:24:22 -05:00
parent ec5aeb1b15
commit 1eada21549
4 changed files with 58 additions and 36 deletions

View File

@ -13,19 +13,26 @@
(function( $, undefined ) { (function( $, undefined ) {
$.effects.effect.fade = function( o ) { $.effects.effect.fade = function( o ) {
return this.queue( function() { return this.queue( function( next ) {
var el = $( this ), var el = $( this ),
mode = $.effects.setMode( el, o.mode || 'hide' ); mode = $.effects.setMode( el, o.mode || 'toggle' ),
hide = mode === "hide";
el.show();
el.animate({ el.animate({
opacity: mode opacity: hide ? 0 : 1
}, { }, {
queue: false, queue: false,
duration: o.duration, duration: o.duration,
easing: o.easing, easing: o.easing,
complete: function() { complete: function() {
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); if ( hide ) {
el.dequeue(); el.hide();
}
if ( o.complete ) {
o.complete.call( this );
}
next();
} }
}); });
}); });

View File

@ -16,18 +16,18 @@ $.effects.effect.pulsate = function( o ) {
return this.queue( function( next ) { return this.queue( function( next ) {
var elem = $( this ), var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || "show" ), mode = $.effects.setMode( elem, o.mode || "show" ),
show = mode === "show" || !elem.is( ":visible" ), show = mode === "show",
showhide = ( show || mode === "hide" ), hide = mode === "hide",
// showing or hiding leaves of the "last" animation // showing or hiding leaves of the "last" animation
anims = ( ( o.times || 5 ) * 2 ) - ( showhide ? 1 : 0 ), anims = ( ( o.times || 5 ) * 2 ) - ( show || hide ? 1 : 0 ),
duration = o.duration / anims, duration = o.duration / anims,
animateTo = 0, animateTo = 0,
queue = elem.queue(), queue = elem.queue(),
queuelen = queue.length, queuelen = queue.length,
i; i;
if ( show ) { if ( show || !elem.is(':visible')) {
elem.css( "opacity", 0 ).show(); elem.css( "opacity", 0 ).show();
animateTo = 1; animateTo = 1;
} }
@ -42,7 +42,7 @@ $.effects.effect.pulsate = function( o ) {
elem.animate({ elem.animate({
opacity: animateTo opacity: animateTo
}, duration, o.easing, function() { }, duration, o.easing, function() {
if ( animateTo === 0 ) { if ( hide ) {
elem.hide(); elem.hide();
} }
if ( o.complete ) { if ( o.complete ) {

View File

@ -25,6 +25,7 @@ $.effects.effect.puff = function( o ) {
$.extend(o, { $.extend(o, {
effect: 'scale', effect: 'scale',
queue: false,
fade: true, fade: true,
mode: mode, mode: mode,
percent: mode == 'hide' ? percent : 100, percent: mode == 'hide' ? percent : 100,
@ -36,13 +37,13 @@ $.effects.effect.puff = function( o ) {
} }
}); });
elem.effect( o ).dequeue(); elem.effect( o );
}); });
}; };
$.effects.effect.scale = function( o ) { $.effects.effect.scale = function( o ) {
return this.queue( function() { return this[ o.queue === false ? "each" : "queue" ]( function() {
// Create element // Create element
var el = $( this ), var el = $( this ),
@ -62,6 +63,7 @@ $.effects.effect.scale = function( o ) {
// We are going to pass this effect to the size effect: // We are going to pass this effect to the size effect:
options.effect = "size"; options.effect = "size";
options.queue = false;
// Set default origin and restore for show/hide // Set default origin and restore for show/hide
if ( mode != 'effect' ) { if ( mode != 'effect' ) {
@ -87,14 +89,14 @@ $.effects.effect.scale = function( o ) {
}; };
// Animate // Animate
el.effect(options).dequeue(); el.effect(options);
}); });
}; };
$.effects.effect.size = function( o ) { $.effects.effect.size = function( o ) {
return this.queue( function() { return this[ o.queue === false ? "each" : "queue" ]( function() {
// Create element // Create element
var el = $( this ), var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ], props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],

View File

@ -17,46 +17,59 @@ $.effects.effect.shake = function( o ) {
return this.queue( function() { return this.queue( function() {
var el = $( this ), var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ], props = [ "position", "top", "bottom", "left", "right" ],
mode = $.effects.setMode( el, o.mode || 'effect' ), mode = $.effects.setMode( el, o.mode || "effect" ),
direction = o.direction || 'left', direction = o.direction || "left",
distance = o.distance || 20, distance = o.distance || 20,
times = o.times || 3, times = o.times || 3,
speed = o.duration || 140, anims = times * 2 + 1,
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left', speed = o.duration,
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg', ref = (direction == "up" || direction == "down") ? "top" : "left",
motion = (direction == "up" || direction == "left") ? "pos" : "neg",
animation = {}, animation = {},
animation1 = {}, animation1 = {},
animation2 = {}, animation2 = {},
i; i,
// Adjust // we will need to re-assemble the queue to stack our animations in place
$.effects.save( el, props ); queue = el.queue(),
el.show(); queuelen = queue.length;
$.effects.createWrapper( el ); // Create Wrapper
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el );
// Animation // Animation
animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance; animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance;
animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2; animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2;
animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2; animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2;
// Animate // Animate
el.animate( animation, speed, o.easing ); el.animate( animation, speed, o.easing );
// Shakes // Shakes
for ( i = 1; i < times; i++ ) { for ( i = 1; i < times; i++ ) {
el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
}; };
el el
.animate( animation1, speed, o.easing ) .animate( animation1, speed, o.easing )
.animate( animation, speed / 2, o.easing, function() { .animate( animation, speed / 2, o.easing, function() {
if ( mode === "hide" ) {
el.hide();
}
// Last shake // Last shake
$.effects.restore( el, props ); $.effects.restore( el, props );
$.effects.removeWrapper( el ); $.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); $.isFunction( o.complete ) && o.complete.apply( this, arguments );
}) });
.dequeue();
// inject all the animations we just queued to be first in line (after "inprogress")
if ( queuelen > 1) {
queue.splice.apply( queue,
[ 1, 0 ].concat( queue.splice( queuelen, anims ) ) );
}
el.dequeue();
}); });
}; };