Effects (blind): direction now accepts up/down/left/right as well as vertical(up) and horizontal(left) - Fixes #4480 - Invert the blind effect.

Author: gnarf

tests/visual/effects.all.html

@@ -26,14 +26,26 @@
 <ul class="effects">
 
 	<li>
-		<div class="effect" id="blindHorizontally">
-			<p>Blind horizontally</p>
+		<div class="effect" id="blindUp">
+			<p>Blind up</p>
 		</div>
 	</li>
 
 	<li>
-		<div class="effect" id="blindVertically">
-			<p>Blind vertically</p>
+		<div class="effect" id="blindDown">
+			<p>Blind down</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="blindLeft">
+			<p>Blind left</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="blindRight">
+			<p>Blind right</p>
 		</div>
 	</li>
 

tests/visual/effects.all.js

@@ -33,8 +33,10 @@ $(function() {
 		})
 	})
 
-	effect("#blindHorizontally", "blind", { direction: "horizontal" });
-	effect("#blindVertically", "blind", { direction: "vertical" });
+	effect("#blindLeft", "blind", { direction: "left" });
+	effect("#blindUp", "blind", { direction: "up" });
+	effect("#blindRight", "blind", { direction: "right" });
+	effect("#blindDown", "blind", { direction: "down" });
 
 	effect("#bounce3times", "bounce", { times: 3 });
 

ui/jquery.effects.blind.js

@@ -11,38 +11,67 @@
  *	jquery.effects.core.js
  */
 (function( $, undefined ) {
+	
+var rvertical = /up|down|vertical/;
+var rpositivemotion = /up|left|vertical|horizontal/;
 
 $.effects.effect.blind = function( o ) {
 
 	return this.queue( function() {
 
 		// Create element
 		var el = $( this ),
-			props = [ 'position', 'top', 'bottom', 'left', 'right' ],
-			mode = $.effects.setMode( el, o.mode || 'hide' ),
-			direction = o.direction || 'vertical',
-			ref = ( direction == 'vertical' ) ? 'height' : 'width',
+			props = [ "position", "top", "bottom", "left", "right" ],
+			mode = $.effects.setMode( el, o.mode || "hide" ),
+			direction = o.direction || "up",
+			vertical = rvertical.test( direction ),
+			ref = vertical ? "height" : "width",
+			ref2 = vertical ? "top" : "left",
+			motion = rpositivemotion.test( direction ),
 			animation = {},
 			wrapper, distance;
 
 		$.effects.save( el, props ); 
 		el.show(); 
 		wrapper = $.effects.createWrapper( el ).css({ 
-			overflow: 'hidden'
+			overflow: "hidden"
 		});
 
-		animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 );
+		distance = wrapper[ ref ]();
+
+		animation[ ref ] = ( mode === "show" ? distance : 0 );
+		if ( !motion ) {
+			el
+				.css( vertical ? "bottom" : "right", 0 )
+				.css( vertical ? "top" : "left", "" )
+				.css({ position: "absolute" });
+			animation[ ref2 ] = ( mode === "show" ) ? 0 : distance;
+		}
 
 		// start at 0 if we are showing
-		( mode == 'show' && wrapper.css( ref, 0 ) );
+		if ( mode == "show" ) {
+			wrapper.css( ref, 0 );
+			if ( ! motion ) {
+				wrapper.css( ref2, distance );
+			}
+		}
 
 		// Animate
-		wrapper.animate( animation, o.duration, o.easing, function() {
-			( mode == 'hide' && el.hide() ); 
-			$.effects.restore( el, props ); 
-			$.effects.removeWrapper( el );
-			$.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments );
-			el.dequeue();
+		wrapper.animate( animation, {
+			duration: o.duration,
+			easing: o.easing,
+			queue: false,
+			complete: function() {
+				if ( mode == "hide" ) {
+					el.hide();
+				}
+				$.effects.restore( el, props ); 
+				$.effects.removeWrapper( el );
+				if ( $.isFunction( o.complete ) ) {
+					o.complete.apply( el[ 0 ], arguments );
+				}
+				el.dequeue();
+			}
 		});
 
 	});