Custom tooltip animations based on widget-animations branch.

Author: jzaefferer

demos/tooltip/custom-animation.html

@@ -11,15 +11,12 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
-		// TODO overhaul this with custom animation API
 		$(".demo").tooltip({
-			open: function() {
-				$(".ui-tooltip").stop(false, true).hide().slideDown();
+			show: {
+				effect: "slideDown"
 			},
-			close: function() {
-				$(".ui-tooltip").stop(false, false).show().slideUp(function() {
-					$(this).remove();
-				});
+			hide: {
+				effect: "slideUp"
 			}
 		});
 	});

ui/jquery.ui.tooltip.js

@@ -91,7 +91,7 @@ $.widget("ui.tooltip", {
 		}, this.options.position ) ).hide();
 
 
-		tooltip.fadeIn();
+		this._show( tooltip, this.options.show );
 
 		this._trigger( "open", event );
 
@@ -111,7 +111,7 @@ $.widget("ui.tooltip", {
 		var tooltip = this._find( target );
 		target.removeAttr( "aria-describedby" );
 
-		tooltip.fadeOut( function() {
+		this._hide( tooltip, this.options.hide, function() {
 			$( this ).remove();
 		});
 

ui/jquery.ui.widget.js

@@ -353,6 +353,26 @@ $.Widget.prototype = {
 	}
 };
 
+$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+	$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+		options = options || {};
+		var hasOptions = !$.isEmptyObject( options ),
+			effectName = options.effect || defaultEffect;
+		options.complete = callback;
+
+		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 ] );
+			}
+		}
+	};
+});
+
 // DEPRECATED
 if ( $.uiBackCompat !== false ) {
 	$.Widget.prototype._getCreateOptions = function() {