DIR : /home/kozerus/public_html/pn/uize/site-source/js/Uize/Web/xEffects.js

/home/kozerus/public_html/pn/uize/site-source/js/Uize/Web

/*______________
|       ______  |   U I Z E    J A V A S C R I P T    F R A M E W O R K
|     /      /  |   ---------------------------------------------------
|    /    O /   |    MODULE : Uize.Web.xEffects Object Extension
|   /    / /    |
|  /    / /  /| |    ONLINE : http://www.uize.com
| /____/ /__/_| | COPYRIGHT : (c)2009-2016 UIZE
|          /___ |   LICENSE : Available under MIT License or GNU General Public License
|_______________|             http://www.uize.com/license.html
*/

/* Module Meta Data
	type: Extension
	importance: 5
	codeCompleteness: 80
	docCompleteness: 50
*/

/*?
	Introduction
		The =Uize.Web.xEffects= module extends the =Uize.Web= object by adding functionality for animation effects.

		*DEVELOPERS:* `Ben Ilegbodu`, original code contributed by `Zazzle Inc.`

		The =Uize.Web.xEffects= module is an extension module that extends the =Uize.Web= class. Pages that want to leverage the syntax-friendly nature of =Uize.Web= may not need to leverage any animation effects. Therefore, the animation effects functionality is not implemented in the =Uize.Web= class in order to reduce the need for loading the extra code.  Instead, in order to include the animation effects, one needs to require the =Uize.Web.xEffects= extension module.

		Key Features
			The =Uize.Web.xEffects= extension module provides the following features...

			Queued Animations Methods
				document...

			Queue Management Methods
				document...

			Display Animations Methods
				document...
*/

Uize.module ({
	name:'Uize.Web.xEffects',
	required:'Uize.Dom.Basics',
	builder:function (_object) {
		'use strict';

		var
			/*** Variables for Scruncher Optimization ***/
				_true = true,
				_false = false,
				_null = null,
				_undefined,
				_Uize = Uize,
				_Uize_Dom_Basics = _Uize.Dom.Basics,
				_Uize_isFunction = _Uize.isFunction,
				_Uize_isPlainObject = _Uize.isPlainObject,
				_Uize_copyInto = _Uize.copyInto,
				_Uize_Dom_Basics_getStyle = _Uize_Dom_Basics.getStyle,
				_Uize_Dom_Basics_setStyle = _Uize_Dom_Basics.setStyle,
				_objectPrototype = _object.prototype,

			/*** General Variables ***/
				_animationSpeeds = {
					slow:600,
					fast:200
				},
				_defaultTimingInfo = {
					module:'Uize.Fade',
					curve:'celeration',
					params:[0.1, 0.9]
				},
				_timings = {
					linear:{
						curve:'linear'
					},
					'ease-in':{
						curve:'easeInPow',
						params:[1.5]
					},
					'ease-out':{
						curve:'easeOutPow',
						params:[1.5]
					},
					'ease-in-out':{
						curve:'easeInOutPow',
						params:[1.5]
					},
					bounce:{
						module:'Uize.Curve.Rubber',
						curve:'easeOutBounce'
					}
				}
		;

		/*** Utility Functions ***/
			var
				_getDuration = function(_duration) {
					// ensure duration is a whole number
					return Math.max(
						0,
						!_Uize.isNumber(_duration)
							? _animationSpeeds[_duration] || 400 // 400 is default duration
							: _duration
					);
				}
			;

		/*** Implement Hook Methods ***/
			var _previousAtEndOfConstructor = _objectPrototype.atEndOfConstructor;

			_objectPrototype.atEndOfConstructor = function(_nodes) {
				var m = this;

				// call previous first just in case it's defined by base (or another extension)
				_previousAtEndOfConstructor.call(m, _nodes);

				/* effects queue */
					m._queue = [];
					m._activeFadeObjects = [];
			};

		/*** Private Instance Methods ***/
			_objectPrototype._animateDisplay = function(_mustDisplay, _displayProperties, _duration, _callback, _timing) {
				var
					m = this,
					_Uize_Dom_Basics_display = _Uize_Dom_Basics.display
				;

				m._enqueue( // add to effects queue
					function() {
						var
							_opacityProperties = {opacity:0},
							_xProperties = {
								width:0,

								// need to do margins & paddings since we're using the style width and not offsetWidth
								marginRight:0,
								marginLeft:0,
								paddingRight:0,
								paddingLeft:0
							},
							_yProperties = {
								height:0,

								// need to do margins & paddings since we're using the style height and not offsetHeight
								marginTop:0,
								marginBottom:0,
								paddingTop:0,
								paddingBottom:0
							},

							_animateOpacity = _displayProperties._opacity,
							_animateX = _displayProperties._x,
							_animateY = _displayProperties._y,

							_animateProperties = _Uize_copyInto(
								{},
								_animateOpacity ? _opacityProperties : _null,
								_animateX ? _xProperties : _null,
								_animateY ? _yProperties : _null
							),

							_nodesLength = m.length,
							_doneNo = 0,
							_animationOptions = _Uize_isPlainObject(_duration)
								? _duration
								: {
									duration:_duration,
									callback:_callback,
									timing:_timing
								}
						;

						// update the reference to callback, since we want everything
						// drived from _animationOptions
						_callback = _animationOptions.callback;

						m.each(
							function() {
								var
									_node = this,
									_nodeMustDisplay = _mustDisplay,
									_nodeIsHidden = _Uize_Dom_Basics_getStyle(_node, 'display') == 'none'
								;

								// _mustDisplay will be null or undefined if we're trying to do a toggle operation.
								// then _mustDisplay will be fixed based upon whether or not the node is hidden
								if (_nodeMustDisplay == _null)
									_nodeMustDisplay = _nodeIsHidden;

								// display the node (for style calculations) by:
								// - first checking to see if it's already visible
								// - second removing display value on the node
								// - third explicitly setting display to a non-"none" value
								if (_nodeIsHidden) {
									_Uize_Dom_Basics_setStyle(_node, {display:''});
									_Uize_Dom_Basics_getStyle(_node, 'display') == 'none'
										&& _Uize_Dom_Basics_display(_node);
								}

								var
									_propertiesFinal = _nodeMustDisplay
										? _Uize_Dom_Basics_getStyle(_node, _animateProperties)
										: _animateProperties,
									_initialProperties = _Uize_copyInto(
										{},
										!_nodeMustDisplay || !_animateOpacity ? _opacityProperties : _null,
										!_nodeMustDisplay || !_animateX ? _xProperties : _null,
										!_nodeMustDisplay || !_animateY ? _yProperties : _null
									),
									_restoreProperties = _Uize_copyInto(
										{overflow:1,overflowX:1,overflowY:1},
										_animateProperties,
										_initialProperties
									),
									_propertiesToRestore = {}
								;

								// build list of style properties actually set on the node itself
								// so we can set them back when we're done
								for (var _styleProperty in _restoreProperties) {
									var _styleValue = _node.style[_styleProperty];
									_propertiesToRestore[_styleProperty] = _styleValue != 'auto' ? _styleValue : '';
								}

								// set initial state before
								// NOTE: setting here instead of as the "start" property of animate
								// so that it happens immediately and not after all the processing/queueing
								// going on in animate (particularly defer loading modules)
								_Uize_Dom_Basics_setStyle(
									_node,
									_Uize_copyInto(
										_animateX || _animateY
											? {
												// for clipping while animating (won't actually get animated)
												overflow:'hidden',

												// Apparently IE doesn't update overflow when overflowX/Y are the same
												overflowX:'hidden',
												overflowY:'hidden'
											}
											: {},
										_animateProperties,
										_Uize_Dom_Basics_getStyle(_node, _initialProperties)
									)
								);

								// create a throw-away Uize.Web. object so we can call animate on it and leverage existing code
								_object(_node).animate(
									_propertiesFinal,
									_Uize.copy(
										_animationOptions,
										{
											// override the callback in _animationOptions w/ our own, but call it in the function
											callback:function() {
												// Now that we're done, "cleanse" the style properties by resetting them
												_Uize_Dom_Basics_setStyle(_node, _propertiesToRestore);

												// Hide the node if we were actually trying to hide it
												!_nodeMustDisplay && _Uize_Dom_Basics_display(_node, _false);

												// finally call callback
												_Uize_isFunction(_callback) && _callback.call(_node);

												// go to the next element in the effects queue (if any)
												// when all nodes have been animated
												// we could call this before the callback, just in case the callback takes
												// a while, but the callback may want to clear the queue or otherwise change
												// stuff before moving onto the next animation
												++_doneNo == _nodesLength && m._dequeue();
											}
										}
									)
								);
							}
						);
					}
				);

				return m;
			};

			_objectPrototype._dequeue = function() {
				var
					m = this,
					_queue = this._queue,
					_queueLength = _queue.length
				;
				m._queueInUse = _false; // we always call dequeue to see if there's more work to do, so in the case where there isn't, this will stay false
				if (_queueLength) {
					m._queueInUse = _true;
					_queue.shift()(); // dequeue and call immediately
				}
			};

			_objectPrototype._enqueue = function(_effectToExec) {
				this._queue.push(_effectToExec) == 1
					&& !this._queueInUse
					&& this._dequeue() // if this is the first effect added to the queue we need to start it
				;
			};

		/*** Public Instance Methods ***/
			/** Animation **/
				_objectPrototype.animate = function(_styleProperties, _duration, _callback, _timing) {
					var
						m = this,
						_options = _Uize_isPlainObject(_duration) ? _duration : {},
						_useQueue = _options.useQueue !== _false,
						_step = _options.step,
						_startCallback = _options.startCallback,
						_stepCallback = _options.stepCallback,
						_startStyleProperties = _options.start
					;

					if (!_Uize.isEmpty(_options)) {
						_duration = _options.duration;
						_callback = _options.callback;
						_timing = _options.timing;
					}

					var
						_timingIsFunction = _Uize_isFunction(_timing),
						_timingInfo = !_timingIsFunction ? _timings[_timing] || _defaultTimingInfo : _null,
						_execAnimation = function() {
							var _modulesToRequire = ['Uize.Fx'];

							// ensure valid duration
							_duration = _getDuration(_duration);

							// get timing info if timing isn't a function so we can build a timing function
							!_timingIsFunction
								&& _modulesToRequire.push( // also need to require curve module (if we don't already have a timing function
									(
										_timingInfo = _timings[_timing] || _defaultTimingInfo
									).module || 'Uize.Curve'
								)
							;

							// load in needed modules
							_Uize.require(
								_modulesToRequire,
								function(_Uize_Fx, _curveClass) {
									var
										_doneNo = 0,
										_nodesLength = m.length,
										_activeFadeObjects = m._activeFadeObjects
									;

									if (!_timingIsFunction)
										_timing = _curveClass[_timingInfo.curve].apply(_undefined, _timingInfo.params);

									m.each(
										function() {
											var
												_node = this,
												_fadeObject = _Uize_Fx.fadeStyle(
													_node,
													_startStyleProperties,
													_styleProperties,
													_duration,
													{
														curve:_timing,
														quantization:_step
													}
												)
											;
											_activeFadeObjects.push(_fadeObject);
											_fadeObject.wire(
												_Uize_copyInto(
													{
														Done:function() {
															// remove in FIFO order
															_activeFadeObjects.shift();

															// call user-supplied callback
															_Uize_isFunction(_callback)
																&& _callback.call(_node);

															// if we used the queue, move on to the next effect in the queue
															if (++_doneNo == _nodesLength && _useQueue)
																m._dequeue()
															;
														}
													},
													_startCallback
														&& {
															Start:function(_event) { _startCallback.call(_node, _event.source.valueOf()) }
														},
													_stepCallback
														&& {
															'Changed.value':function(_event) { _stepCallback.call(_node, _event.source.valueOf()) }
														}
												)
											);
										}
									);
								}
							);
						}
					;

					_useQueue === _false
						? _execAnimation() // just call immediately
						: m._enqueue(_execAnimation) // add to the queue
					;

					return m;
					/*?
						Instance Methods
							animate
								Performs custom animation of a set of CSS style properties on the matched set of DOM nodes.

								SYNTAX
								........................................................
								myWeb = myWeb.animate(stylePropertiesOBJ, durationMsINT, callbackFUNC, timingSTRorFUNC);
								........................................................

								The stylePropertiesOBJ Parameter
									document...

								The durationMsINT Parameter
									document...

								The callbackFUNC Parameter
									document...

								The timingSTRorFUNC Parameter
									document...

								VARIATION
								........................................................
								myWeb = myWeb.animate(stylePropertiesOBJ, animationOptionsOBJ);
								........................................................

								The animationOptionsOBJ Parameter
									duration
										document

									callback
										document

									timing
										document

									start
										document

									startCallback
										document

									step
										document

									stepCallback
										document

									useQueue
										document

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See also related =delay= method
					*/
				};

				_objectPrototype.clearQueue = function() {
					this._queue.length = this._activeFadeObjects.length = 0;
					return this;
				};
					/*?
						Instance Methods
							clearQueue
								Remove all items from the queue that have not yet been run.

								SYNTAX
								........................................................
								myWeb = myWeb.clearQueue();
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
					*/

				_objectPrototype.delay = function(_duration, _callback) {
					var m = this;
					m._enqueue(
						function() {
							var
								_activeFadeObjects = m._activeFadeObjects,
								_timeoutId = setTimeout(
									function() {
										_activeFadeObjects.length = 0;
										_Uize_isFunction(_callback) && _callback();
										m._dequeue();
									},
									_getDuration(_duration)
								)
							;

							// instead of adding a fade object, just add "stop" function
							_activeFadeObjects.push(function() { clearTimeout(_timeoutId) });
						}
					);
					return m;
					/*?
						Instance Methods
							delay
								Sets a timer for the specified duration to delay the execution of subsequent items in the queue.

								SYNTAX
								........................................................
								myWeb = myWeb.delay(durationMsINT);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.delay(durationMsINT, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.delay();
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See also related =animate= method
					*/
				};

				_objectPrototype.queue = function(_param) {
					var m = this;

					if (_param == _undefined)
						return m._queue;
					else {
						var _enqueueCallbackWithDequeue = function(_callback) {
							_Uize_isFunction(_callback)
								&& m._enqueue(
									function() {
										// pass dequeue as param so that it can be called at the end of user-supplied callback
										_callback(
											function() { m._dequeue() }
										);
									}
								)
							;
						};
						if (_Uize_isFunction(_param)) // add callback function to queue
							_enqueueCallbackWithDequeue(_param);
						else if (_Uize.isArray(_param)) { // replace current queue w/ new queue
							m.clearQueue();
							_Uize.forEach(_param, _enqueueCallbackWithDequeue);
						}

						return m;
					}
				};
					/*?
						Instance Methods
							queue
								get
									Returns the current queue of effects to be executed on the matched set of DOM nodes.

									SYNTAX
									........................................................
									queueARRAY = myWeb.queue();
									........................................................

									NOTES
									- Returns a reference to the actual effects queue, so manipulating the array affects the underlying queue as well.

								set
									Adds a callback to the effects queue to be executed once for each of the matched set of DOM nodes.

									SYNTAX
									........................................................
									myWeb = myWeb.queue(callbackFUNC);
									........................................................

									SYNTAX
									........................................................
									myWeb = myWeb.queue(newQueueARRAY);
									........................................................

									NOTES
									- Returns a reference to the same =Uize.Web= object
									- See also related =animate= & =delay= methods
					*/

				_objectPrototype.stop = function(_jumpToEnd, _clearQueue) {
					var
						m = this,
						_activeFadeObjects = m._activeFadeObjects
					;

					if (_activeFadeObjects.length) {
						for (var _fadeNo = -1, _activeFadeObjectsLength = _activeFadeObjects.length; ++_fadeNo < _activeFadeObjectsLength;) {
							var _activeFadeObject = _activeFadeObjects[_fadeNo];

							if (_Uize_isFunction(_activeFadeObject))
								_activeFadeObject(); // delay setTimeout
							else {
								// stop the fade
								_activeFadeObject.stop();

								// set the end value of each node if _jumpToEnd is true
								_jumpToEnd
									&& _Uize_Dom_Basics_setStyle(m[_fadeNo], _activeFadeObject.get('endValue'))
								;
							}
						}

						// we stopped them all, so there should be no more active ones
						_activeFadeObjects.length = 0;
					}

					if (_clearQueue) // remove all queued animations
						m.clearQueue();

					// go to the next queued animation (if one exists)
					m._dequeue();

					return m;
					/*?
						Instance Methods
							stop
								Stops the currently running animation on the matched set of DOM nodes.

								SYNTAX
								........................................................
								myWeb = myWeb.stop();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.stop(jumpToEndBOOL);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.stop(jumpToEndBOOL, clearQueueBOOL);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See related =animate= method
					*/
				};

			/** Display-related methods **/
				var _makeDisplayMethods = function(_methodNames, _displayProperties, _animationOptional) {
					// NOTE: The array of methodNames contains three method names:
					// 1st - for displaying the content (show/fadeIn/slideDown/slideOut)
					// 2nd - for hiding the content (hide/fadeOut/sldieUp/slideIn)
					// 3rd - for toggling 1st & 2nd (toggleShow/toggleFade/toggleSlideY/toggleSlideX)
					// 4th - for supporting parameterized display (display/fade/slideY/slideX)
					var
						_animateDisplay = function(_mustDisplay, _duration, _callback, _timing, _baseMethod) {
							if (_baseMethod) // intending to call the base functionality w/o animation
								return _baseMethod.call(this, _mustDisplay);
							else
								return this._animateDisplay(
									_mustDisplay,
									_displayProperties,
									_duration,
									_callback,
									_timing
								);
						}
					;
					_Uize.forEach(
						[_true, _false, _undefined],
						function(_mustDisplay, _methodNo) {
							var
								_methodName = _methodNames[_methodNo],
								_baseMethod = _objectPrototype[_methodName]
							;
							_objectPrototype[_methodName] = function(_duration, _callback, _timing) {
								return _animateDisplay.call(
									this,
									_mustDisplay,
									_duration,
									_callback,
									_timing,
									_animationOptional && !arguments.length && _baseMethod
								);
							};
						}
					);
					var
						_parameterizedMethodName = _methodNames[3],
						_baseParameterizedMethod = _objectPrototype[_parameterizedMethodName]
					;
					_objectPrototype[_parameterizedMethodName] = function(_mustDisplay, _duration, _callback, _timing) {
						return _animateDisplay.call(
							this,
							_mustDisplay,
							_duration,
							_callback,
							_timing,
							_animationOptional && arguments.length < 2 && _baseParameterizedMethod
						);
					};
				};

				_makeDisplayMethods(['show', 'hide', 'toggleShow', 'display'], {_opacity:1,_x:1,_y:1}, _true);
					/*?
						Instance Methods
							show
								Displays each of the set of matched DOM nodes by both fading in and sliding out horizontally & vertically.

								SYNTAX
								........................................................
								myWeb = myWeb.show(durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.show(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.show(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.show(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See =Uize.Web= base module for calling =show= without any animation
								- See the companion =hide= and =toggleShow= methods
								- See the related =fadeIn=, =slideDown= and =slideOut= methods
								- See =animate= method for more details on animation

							hide
								Hides each of the set of matched DOM nodes by both fading out and sliding in horizontally & vertically.

								SYNTAX
								........................................................
								myWeb = myWeb.hide(durationMsINTorSTR);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.hide(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See =Uize.Web= base module for calling =hide= without any animation
								- See the companion =display= and =toggleShow= methods
								- See the related =fadeOut=, =slideUp= and =slideIn= methods
								- See =animate= method for more details on animation

							toggleShow
								Displays or hides each of the set of matched DOM nodes by both fading and sliding horizontally & vertically, depending on their current displayed state.

								SYNTAX
								........................................................
								myWeb = myWeb.toggleShow(durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.toggleShow(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.toggleShow(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.toggleShow(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See =Uize.Web= base module for calling =toggleShow= without any animation
								- See the companion =display= and =hide= methods
								- See the related =toggleFade=, =toggleSlideY= and =toggleSlideX= methods
								- See =animate= method for more details on animation

							display
								Displays or hides each of the set of matched DOM nodes by both fading in/out and sliding out horizontally & vertically.

								SYNTAX
								........................................................
								myWeb = myWeb.display(mustDisplayBOOL, durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.display(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.display(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.display(mustDisplayBOOL, animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See =Uize.Web= base module for calling =display= without any animation
								- See the companion =show=, =hide= and =toggleShow= methods
								- See the related =fade=, =slideX= and =slideY= methods
								- See =animate= method for more details on animation
					*/
				_makeDisplayMethods(['fadeIn', 'fadeOut', 'toggleFade', 'fade'], {_opacity:1});
					/*?
						Instance Methods
							fadeIn
								Displays each of the set of matched DOM nodes by fading them to opaque.

								SYNTAX
								........................................................
								myWeb = myWeb.fadeIn();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.fadeIn(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.fadeIn(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.fadeIn(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.fadeIn(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =fadeTo=, =fadeOut= and =toggleFade= methods
								- See the related =display=, =slideDown= and =slideOut= methods
								- See =animate= method for more details on animation

							fadeOut
								Hides each of the set of matched DOM nodes by fading them to transparent.

								SYNTAX
								........................................................
								myWeb = myWeb.fadeOut();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.fadeOut(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.fadeOut(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.fadeOut(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.fadeOut(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =fadeTo=, =fadeIn= and =toggleFade= methods
								- See the related =hide=, =slideUp= and =slideIn= methods
								- See =animate= method for more details on animation

							toggleFade
								Displays or hides each of the set of matched DOM nodes by animating their opacity, depending on their current displayed state.

								SYNTAX
								........................................................
								myWeb = myWeb.toggleFade();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.toggleFade(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.toggleFade(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.toggleFade(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.toggleFade(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =fadeTo=, =fadeIn= and =fadeOut= methods
								- See the related =toggleShow=, =toggleSlideY= and =toggleSlideX= methods
								- See =animate= method for more details on animation

							fade
								Displays or hides each of the set of matched DOM nodes by animating their opacity.

								SYNTAX
								........................................................
								myWeb = myWeb.fade(mustDisplayBOOL, durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.fade(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.fade(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.fade(mustDisplayBOOL, animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =fadeIn=, =fadeTo=, =fadeOut= and =toggleFade= methods
								- See the related =show=, =slideX= and =slideY= methods
								- See =animate= method for more details on animation
					*/

				_objectPrototype.fadeTo = function(_opacity, _duration, _timing, _callback) {
					return this.animate({opacity:_opacity}, _duration, _timing, _callback);
					/*?
						Instance Methods
							fadeTo
								Adjusts the opacity of each of the set of matched DOM nodes

								SYNTAX
								........................................................
								myWeb = myWeb.fadeTo(opacityFLOAT);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.fadeTo(opacityFLOAT, durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.fadeTo(opacityFLOAT, durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.fadeTo(opacityFLOAT, durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.fadeTo(opacityFLOAT, animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =fadeIn=, =fadeOut= and =toggleFade= methods
								- See =animate= method for more details on animation
					*/
				};

				_makeDisplayMethods(['slideDown', 'slideUp', 'toggleSlideY', 'slideY'], {_y:1});
					/*?
						Instance Methods
							slideDown
								Displays each of the set of matched DOM nodes with a vertical sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideDown();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.slideDown(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.slideDown(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideDown(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.slideDown(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideUp= and =toggleSlideY= methods
								- See the related =display=, =fadeIn= and =slideOut= methods
								- See =animate= method for more details on animation

							slideUp
								Hides each of the set of matched DOM nodes with a vertical sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideUp();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.slideUp(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.slideUp(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideUp(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.slideUp(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideDown= and =toggleSlideY= methods
								- See the related =hide=, =fadeOut= and =slideIn= methods
								- See =animate= method for more details on animation

							toggleSlideY
								Displays or hides each of the set of matched DOM nodes with a vertical sliding motion, depending on their current displayed state.

								SYNTAX
								........................................................
								myWeb = myWeb.toggleSlideY();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.toggleSlideY(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.toggleSlideY(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.toggleSlideY(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.toggleSlideY(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideDown= and =slideUp= methods
								- See the related =toggleShow=, =toggleFade= and =toggleSlideX= methods
								- See =animate= method for more details on animation

							slideY
								Displays or hides each of the set of matched DOM nodes with a vertical sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideY(mustDisplayBOOL, durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.toggleSlideY(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.toggleSlideY(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideY(mustDisplayBOOL, animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideDown=, =slideUp= and =toggleSlideY= methods
								- See the related =show=, =fade= and =slideY= methods
								- See =animate= method for more details on animation
					*/
				_makeDisplayMethods(['slideOut', 'slideIn', 'toggleSlideX', 'slideX'], {_x:1});
					/*?
						Instance Methods
							slideOut
								Displays each of the set of matched DOM nodes with a horizontal sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideOut();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.slideOut(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.slideOut(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideOut(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.slideOut(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideIn= and =toggleSlideX= methods
								- See the related =display=, =fadeIn= and =slideDown= methods
								- See =animate= method for more details on animation

							slideIn
								Hides each of the set of matched DOM nodes with a horizontal sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideIn();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.slideIn(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.slideIn(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideIn(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.slideIn(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideOut= and =toggleSlideX= methods
								- See the related =hide=, =fadeOut= and =slideUp= methods
								- See =animate= method for more details on animation

							toggleSlideX
								Displays or hides each of the set of matched DOM nodes with a horizontal sliding motion, depending on their current displayed state.

								SYNTAX
								........................................................
								myWeb = myWeb.toggleSlideX();
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.toggleSlideX(durationMsINTorSTR);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.toggleSlideX(durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.toggleSlideX(durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 4
								........................................................
								myWeb = myWeb.toggleSlideX(animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideOut= and =slideIn= methods
								- See the related =toggleShow=, =toggleFade= and =toggleSlideY= methods
								- See =animate= method for more details on animation

							slideX
								Displays or hides each of the set of matched DOM nodes with a horizontal sliding motion.

								SYNTAX
								........................................................
								myWeb = myWeb.slideX(mustDisplayBOOL, durationMsINTorSTR);
								........................................................

								VARIATION 1
								........................................................
								myWeb = myWeb.slideX(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC);
								........................................................

								VARIATION 2
								........................................................
								myWeb = myWeb.slideX(mustDisplayBOOL, durationMsINTorSTR, callbackFUNC, timingSTRorFUNC);
								........................................................

								VARIATION 3
								........................................................
								myWeb = myWeb.slideX(mustDisplayBOOL, animationOptionsOBJ);
								........................................................

								NOTES
								- Returns a reference to the same =Uize.Web= object
								- See the companion =slideOut=, =slideIn= and =toggleSlidex= methods
								- See the related =show=, =fade= and =slideX= methods
								- See =animate= method for more details on animation
					*/
	}
});