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.