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

Author: gnarf

ui/jquery.effects.fade.js

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

ui/jquery.effects.pulsate.js

@@ -16,18 +16,18 @@ $.effects.effect.pulsate = function( o ) {
 	return this.queue( function( next ) {
 		var elem = $( this ),
 			mode = $.effects.setMode( elem, o.mode || "show" ),
-			show = mode === "show" || !elem.is( ":visible" ),
-			showhide = ( show || mode === "hide" ),
+			show = mode === "show",
+			hide = mode === "hide",
 
 			// 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,
 			animateTo = 0,
 			queue = elem.queue(),
 			queuelen = queue.length,
 			i;
 
-		if ( show ) {
+		if ( show || !elem.is(':visible')) {
 			elem.css( "opacity", 0 ).show();
 			animateTo = 1;
 		}
@@ -42,7 +42,7 @@ $.effects.effect.pulsate = function( o ) {
 		elem.animate({
 			opacity: animateTo
 		}, duration, o.easing, function() {
-			if ( animateTo === 0 ) {
+			if ( hide ) {
 				elem.hide();
 			}
 			if ( o.complete ) {

ui/jquery.effects.scale.js

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

ui/jquery.effects.shake.js

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