JAVASCRIPT EXAMPLES Hover Fader Stretching Menu
In this example, an instance of the Uize.Widget.HoverFader widget class is being used to add a JavaScript animation stretching effect to a colorful navigation menu (seen below). This instance manages fading of values for the width, letter-spacing, and border-right-color CSS style properties for all links in the menu. Mouse over the links in the menu to experience the effect. Mousing over a link triggers an animation that increases its width and the letter spacing of its text. Additionally, the color for the five pixel right border is faded from black to white. In addition to the initial settings for the instance, a set of links to the right of the menu lets you preview different animation effects that can be achieved by simply setting different curves to control the fade in and fade out. Click on one of these links and the settings of the fadeIn and fadeOut state properties of the instance will be updated. The instance is "tickled" (by calling its tickle instance method), to give you an immediate preview of the new effect. Be sure, though, to also interact with the menu, since some subtleties of an effect may only become apparent when using the menu. Take a look at the source code for this page to see how the hover fader effect is configured for the menu. Looking at the code, you will notice that the Uize.Widget.HoverFader instance is created using the declarative syntax for widget adoption (notice the assignment of the $page_menuHoverFader property on the window object). It should be noted that the Uize.Curve, Uize.Curve.Mod, and Uize.Curve.Rubber modules are only needed for the additional effects previews, and not the basic initial settings.
- PLAIN VANILLA - short linear fade in, short linear fade out
- JELLO - elastic fade in, and bouncy fade out
- GENTLE ELASTIC - easeOutElastic for fade in, easeOutElastic for fade out
- JERKY - notch-in-the-middle for fade in, and multiple resistance points for fade out
- GENTLE BOUNCE - muted bounce for fade in, and muted bounce for fade out
- CRAZY BOUNCY - ease out for fade in, and extremely bouncy fade out
- SNAPPY - fast easeInOutPow for fade in, fast easeOutPow for fade out
- OVERSHOOT - easeOutBack for fade in, very quick easeInBack for fade out
- FAST THUD - fast muted easeOutBounce for fade in and fade out
- JUMPING BEAN MADNESS - muted bounce fade in, undying bounce fade out
- SHUDDERS - fast easeMiddlePow for fade in, shuddery ease-in-out for fade out
- BLINKY - right border blinks during fade in, stays white till end during fade out