Determine how to support effects across plugins

Current places where animations could be used:

accordion - open

accordion - close

datepicker - show

datepicker - hide

dialog - show

dialog - hide

dialog - resize

resizable - resize (when ghosting)

slider - slide (click on bar)

tabs - show

tabs - hide

#2358 is about supporting effects in dialogs

Another one which was mentioned by someone on IRC:

sortables - when an item changes position the old item is just bumped down

In places where we can't abstract a common API, it may be an option to just expose the configuration of the underlying method (usually works well for plugins that delegate to $.ajax, also $.ui.mouse, where delay and distance are exposed).

In this case, we'd provide the necessary properties, eg. height: "hide", and mix that with user specified properties for duration, easing etc.; at best, by a call to $.extend and passing the result to .animate().

Another occurence of animations:

Draggable revert is animated, can be customized with revertDuration.

The following function performs a show or hide animation for a target element based upon a single option that describes the required effect. It allows for the built-in show and fade animations, as well as any of the UI effects.

function showHideAnim(target, effect, showing) {
	// Convert to array
	effect = ($.isArray(effect) ? effect : (typeof effect == 'string' ? [effect] :
		[effect.fx, effect.options, effect.speed, effect.callback]));
	// Check for options
	(effect[1] && typeof effect[1] != 'object' ? effect.splice(1, 0, null) : effect);
	// Check for callback
	($.isFunction(effect[2]) ? effect.splice(2, 0, null) : effect);
	// Special case for 'show'
	effect = (effect[0] && effect[0] != 'show' ? effect : effect.slice(2));
	(effect[0] == 'fade' ?
		// Special case for 'fade'
		target[showing ? 'fadeIn' : 'fadeOut'].apply(target, effect.slice(2)) :
		// Apply effect
		target[showing ? 'show' : 'hide'].apply(target, effect));
}

This allows the effect to be defined by any of the following - a single string, an array of settings, or a hash of settings:

!'' - immediate show/hide

false - immediate show/hide

'show' - immediate show/hide

[!'', 'normal'] - default show/hide, normal speed

['show', 'slow'] - default show/hide, slow speed

['show', 3000] - default show/hide, 3 seconds

'slow' - default show/hide, slow speed

'normal' - default show/hide, normal speed

'fast' - default show/hide, fast speed

'fade' - fadeIn/Out, normal speed

['fade', 'fast'] - fadeIn/Out, fast speed

'blind' - blind effect, normal speed

['blind', 2000, function() { alert('finished'); }] - blind effect, 2 seconds, callback

['blind', {direction: 'horizontal'}, 3000] - blind effect, options, 3 seconds

{fx: 'blind', speed: 'slow'} - blind effect, slow speed

{fx: 'blind', options: {direction: 'horizontal'}, speed: 3000} - blind effect, options, 3 seconds

!['slide'] - slide effect, normal speed

['slide', function() { alert('slid'); } ] - slide effect, normal speed, callback

Will also be relevant for Tooltip.

scottgonzalez

"Dialog probably comes the closest to an ideal situation (it's possible that it is the ideal solution)."

Haven't we resolved this with the _show/_hide methods in $.Widget?

Partly. There are still other cases like accordion (solved), tabs (potentially solved, but not yet tested), resizable and slider (not yet investigated).

Resizable and slider can use the same syntax as accordion, just specifying a duration and easing.

Tabs is whacky. The only thing that really makes sense is animating height. Right now you can toggle the height and/or fade. A better animation would really be animating the height from the current to the new height, without toggling. If we did that we could still support the accordion syntax. We'll need to discuss changing this API. If we do it, we should land this in 1.9 with the rest of the API change for tabs.

Just discussed this with ajpiano and we can just use the new show/hide API. If we're going to support anything, we may as well support everything.

The show/hide options will be used for anything that does a full show/hide. The new animate option that accordion implements will be used for other animations, such as resizing (with ghost), slider, etc.