UIZE JavaScript Framework

MODULES Uize.Web.xEffects

SEARCHEXAMPLESSOURCETO DODEPSTEST

1. 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.

1.1. Key Features

The Uize.Web.xEffects extension module provides the following features...

1.1.1. Queued Animations Methods

document...

1.1.2. Queue Management Methods

document...

1.1.3. Display Animations Methods

document...

1.2. Examples

There are no dedicated showcase example pages for the Uize.Web.xEffects module.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Web.xEffects module...

SEARCH

1.3. Implementation Info

The Uize.Web.xEffects module defines the Uize.Web.xEffects extension module under the Uize.Web namespace.

1.3.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

STATIC PROPERTIES

Uize.Web.xEffects.moduleName | Uize.Web.xEffects.pathToResources

1.3.2. Features Overridden in This Module

No features have been overridden in this module.

1.3.3. Features Inherited From Other Modules

This module has no inherited features.

1.3.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.3.5. Unit Tests

There is no dedicated unit tests module for the Uize.Web.xEffects module.

2. Instance Methods

2.1. 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);

2.1.1. The stylePropertiesOBJ Parameter

document...

2.1.2. The durationMsINT Parameter

document...

2.1.3. The callbackFUNC Parameter

document...

2.1.4. The timingSTRorFUNC Parameter

document...

VARIATION

myWeb = myWeb.animate(stylePropertiesOBJ, animationOptionsOBJ);

2.1.5. The animationOptionsOBJ Parameter

2.1.5.1. duration

document

2.1.5.2. callback

document

2.1.5.3. timing

document

2.1.5.4. start

document

2.1.5.5. startCallback

document

2.1.5.6. step

document

2.1.5.7. stepCallback

document

2.1.5.8. useQueue

document

NOTES

Returns a reference to the same Uize.Web object
See also related delay method

2.2. 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

2.3. 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

2.4. 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

2.5. 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

2.6. 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

2.7. 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

2.8. 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

2.9. 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

2.10. queue

2.10.1. 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.

2.10.2. 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

2.11. 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

2.12. 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

2.13. 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

2.14. 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

2.15. 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

2.16. 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

2.17. 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

2.18. 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

2.19. 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

2.20. 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

2.21. 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

2.22. 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

3. Static Properties

3.1. Uize.Web.xEffects.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

3.2. Uize.Web.xEffects.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module