Determine how to support effects across plugins

[Scott González]

There should be a unified method for using effects across plugins.

accordion - open
accordion - close
autocomplete - open
autocomplete - close
datepicker - show
datepicker - hide
dialog - show
dialog - hide
dialog - resize
draggable: revert
resizable - resize (when ghosting)
slider - slide (click on bar)
sortable - sort
tabs - show
tabs - hide
tooltip - show
tooltip - hide

---

Proposed API: ._show() and ._hide() methods on $.Widget.

show: null                 // .show()
show: true                 // .fadeIn()
show: number               // .fadeIn( number )
show: string (effect name) // .show( effectName )
show: string (core method) // .coreMethod()
show: object (effect)      // .show( options )
show: object (core method) // .coreMethod( o.duration, o.easing )

[Scott González]

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

[ThrushAAX]

Another one which was mentioned by someone on IRC: sortables - when an item changes position the old item is just bumped down

[Jörn Zaefferer]

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().

[Jörn Zaefferer]

Another occurence of animations:

Draggable revert is animated, can be customized with revertDuration.

[kbwood]

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

[Jörn Zaefferer]

Will also be relevant for Tooltip.

[kradmiy]

scottgonzalez

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

[Jörn Zaefferer]

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

[Scott González]

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

[Scott González]

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.

[Scott González]

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.

[Scott González]

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.