Opened 15 years ago

Closed 11 years ago

#3772 closed feature (fixed)

Determine how to support effects across plugins

Reported by: Scott González Owned by:
Priority: blocker Milestone: 1.9.0
Component: [meta] ui.dev Version: 1.6rc4
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by 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 )

Change History (17)

comment:1 Changed 14 years ago by Scott González

Milestone: 1.next1.8

comment:2 Changed 14 years ago by 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

comment:3 Changed 14 years ago by ThrushAAX

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

comment:4 Changed 14 years ago by 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().

comment:5 Changed 14 years ago by Jörn Zaefferer

Another occurence of animations:

Draggable revert is animated, can be customized with revertDuration.

comment:6 Changed 14 years ago by 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

comment:8 Changed 14 years ago by Scott González

Milestone: 1.81.next

comment:9 Changed 13 years ago by Jörn Zaefferer

Will also be relevant for Tooltip.

comment:10 Changed 13 years ago by kradmiy

scottgonzalez

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

Last edited 13 years ago by kradmiy (previous) (diff)

comment:11 Changed 13 years ago by Scott González

Description: modified (diff)

comment:12 Changed 12 years ago by Scott González

Description: modified (diff)

comment:13 Changed 12 years ago by Scott González

Milestone: 1.next1.9

comment:14 Changed 12 years ago by Jörn Zaefferer

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

comment:15 Changed 12 years ago by 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).

comment:16 Changed 11 years ago by Scott González

Status: newopen

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.

comment:17 Changed 11 years ago by 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.

comment:18 Changed 11 years ago by Scott González

Resolution: fixed
Status: openclosed

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.

Note: See TracTickets for help on using tickets.