Skip to main content

Search and Top Navigation

#3772 closed feature (fixed)

Opened January 06, 2009 02:51AM UTC

Closed May 14, 2012 06:38PM UTC

Determine how to support effects across plugins

Reported by: scottgonzalez Owned by:
Priority: blocker Milestone: 1.9.0
Component: [meta] ui.dev Version: 1.6rc4
Keywords: Cc:
Blocked by: Blocking:
Description

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 )
Attachments (0)
Change History (17)

Changed March 30, 2009 01:32AM UTC by scottgonzalez comment:1

milestone: 1.next1.8

Changed July 12, 2009 08:53PM UTC by scottgonzalez comment:2

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

Changed July 21, 2009 06:41PM UTC by ThrushAAX comment:3

Another one which was mentioned by someone on IRC:

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

Changed July 26, 2009 03:12PM UTC by jzaefferer comment:4

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

Changed July 26, 2009 05:26PM UTC by jzaefferer comment:5

Another occurence of animations:

Draggable revert is animated, can be customized with revertDuration.

Changed January 07, 2010 01:00AM UTC by kbwood comment:6

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

Changed January 28, 2010 02:28AM UTC by scottgonzalez comment:7

milestone: 1.81.next

Changed July 14, 2010 05:52PM UTC by jzaefferer comment:8

Will also be relevant for Tooltip.

Changed February 10, 2011 09:50PM UTC by kradmiy comment:9

_comment0: https://github.com/kradmiy/jquery-ui/commit/edf86b5b5c9e38e2a3f7289b79fef71c7da5fcbd \ \ Core: added new functionality that allows to apply effects on element ( $( ).showHideAnim(effect, showing); ) . Fix #3772 - based on kbwood solution posted http://bugs.jqueryui.com/ticket/3772#comment:6 \ \ Tooltip: added option {animation: 'show'}. Fixed #3772 - tooltip: now it is possible to define animation effect to apply1297404566942764

scottgonzalez

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

Changed February 26, 2011 02:18PM UTC by scottgonzalez comment:10

description: There should be a unified method for using effects across plugins.There should be a unified method for using effects across plugins. \ \ accordion - open[[BR]] \ accordion - close[[BR]] \ autocomplete - open[[BR]] \ autocomplete - close[[BR]] \ datepicker - show[[BR]] \ datepicker - hide[[BR]] \ dialog - show[[BR]] \ dialog - hide[[BR]] \ dialog - resize[[BR]] \ draggable: revert[[BR]] \ resizable - resize (when ghosting)[[BR]] \ slider - slide (click on bar)[[BR]] \ sortable - sort[[BR]] \ tabs - show[[BR]] \ tabs - hide[[BR]] \ tooltip - show[[BR]] \ tooltip - hide[[BR]]

Changed May 30, 2011 05:27PM UTC by scottgonzalez comment:11

description: There should be a unified method for using effects across plugins. \ \ accordion - open[[BR]] \ accordion - close[[BR]] \ autocomplete - open[[BR]] \ autocomplete - close[[BR]] \ datepicker - show[[BR]] \ datepicker - hide[[BR]] \ dialog - show[[BR]] \ dialog - hide[[BR]] \ dialog - resize[[BR]] \ draggable: revert[[BR]] \ resizable - resize (when ghosting)[[BR]] \ slider - slide (click on bar)[[BR]] \ sortable - sort[[BR]] \ tabs - show[[BR]] \ tabs - hide[[BR]] \ tooltip - show[[BR]] \ tooltip - hide[[BR]]There should be a unified method for using effects across plugins. \ \ accordion - open[[BR]] \ accordion - close[[BR]] \ autocomplete - open[[BR]] \ autocomplete - close[[BR]] \ datepicker - show[[BR]] \ datepicker - hide[[BR]] \ dialog - show[[BR]] \ dialog - hide[[BR]] \ dialog - resize[[BR]] \ draggable: revert[[BR]] \ resizable - resize (when ghosting)[[BR]] \ slider - slide (click on bar)[[BR]] \ sortable - sort[[BR]] \ tabs - show[[BR]] \ tabs - hide[[BR]] \ tooltip - show[[BR]] \ tooltip - hide[[BR]] \ \ ---- \ \ 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 ) \ }}}

Changed May 30, 2011 05:27PM UTC by scottgonzalez comment:12

milestone: 1.next1.9

Changed February 24, 2012 12:19PM UTC by jzaefferer comment:13

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

Changed February 24, 2012 12:32PM UTC by scottgonzalez comment:14

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

Changed May 10, 2012 11:48PM UTC by scottgonzalez comment:15

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.

Changed May 11, 2012 12:15AM UTC by scottgonzalez comment:16

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.

Changed May 14, 2012 06:38PM UTC by scottgonzalez comment:17

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.