Wijmo UI for the Web
Animation
There are many different animation effects available for wijmo widgets. Most of the animation options allow you to choose both the type of animation and the easing you'll apply to your widget.
You can see the available animation effects in the wijcombobox Animation demo or you can find more information about the animation effects in the jQuery Effects documentation.
The following animation effects are available for most wijmo widgets:
Effects
This effect shows or hides an element by wrapping the element in a container and pulling it up or down like a window blind.
This effect bounces an element.
This effect shows or hides an element by clipping is vertically or horizontally.
This effect shows or hides an element by fading the element in or out and sliding it in a particular direction.
This effect splits the element into pieces on show or hide. On show the pieces will come together and on hide the pieces will blow apart.
This effect causes the element to fade out and disappear or fade in and appear.
This effect unfolds (show) or folds (hide) an element.
This effect animates the background color of an element before show or hide.
This effect scales an element up or down while showing or hiding the element.
This effect pulses the element before showing or hiding it.
This effect grows (show) or shrinks (hide) by a percentage factor.
This effect shakes the element horizontally or vertically on show or hide.
This effect resizes the element to a specified width and height.
This effect slides the element in (show) or out (hide) of the viewport.
Many of the wijmo widgets allow you to control the easing effects applied to the widget through the animation options. You'll set your easing effect with a string value that represents the easing function. These functions specify the speed at which an animation progresses at different points in the animation.
Easing functions are easier to understand with a demonstration. You can see a demonstration of the available easing functions on the jQueryUI Easings page.
Here's a list of the available easing effects for most of the wijmo widgets. Check your widget's animation option to see what easing effects are available for your widget:
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic |
| easeInQuart | easeOutQuart | easeInOutQuart |
| easeInQuint | easeOutQuint | easeInOutQuint |
| easeInExpo | easeOutExpo | easeInOutExpo |
| easeInSine | easeOutSine | easeInOutSine |
| easeInCirc | easeOutCirc | easeInOutCirc |
| easeInElastic | easeOutElastic | easeInOutElastic |
| easeInBack | easeOutBack | easeInOutBack |
| easeInBounce | easeOutBounce | easeInOutBounce |
| linear | swing |