Tooltip: Overhaul widget animations code to allow delay with plain show/hide

Author: jzaefferer

demos/tooltip/custom-animation.html

@@ -17,8 +17,8 @@
 				delay: 250
 			},
 			hide: {
-				effect: "slideUp",
-				delay: 500
+				effect: "hide",
+				delay: 250
 			}
 		});
 	});
@@ -47,7 +47,9 @@
 
 <div class="demo-description">
 
-<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
+<p>This demo shows how to customize animations. The tooltip is shown, after a
+delay of 250ms, using a slide down animation, and hidden, after another delay,
+without an animation.</p>
 
 </div><!-- End demo-description -->
 

ui/jquery.ui.widget.js

@@ -365,12 +365,23 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
 		if ( hasOptions && $.effects && $.effects[ effectName ] ) {
 			element[ method ]( options );
 		} else if ( element[ effectName ] ) {
-			element[ effectName ]( options.duration, options.easing, callback );
-		} else {
-			element[ method ]();
-			if ( callback ) {
-				callback.call( element[ 0 ] );
+			if ( /show|hide/.test( effectName ) ) {
+				element.queue( function() {
+					element[ effectName ]();
+					if ( callback ) {
+						callback.call( element[ 0 ] );
+					}
+				});
+			} else {
+				element[ effectName ]( options.duration, options.easing, callback );
 			}
+		} else {
+			element.queue( function() {
+				$( this )[ method ]();
+				if ( callback ) {
+					callback.call( element[ 0 ] );
+				}
+			});
 		}
 	};
 });