JAVASCRIPT EXAMPLES Fading Links
In this example, the Uize.Widget.HoverFader widget class is being used to add a JavaScript animation color fading effect to the links in five different menus (seen below). An instance of Uize.Widget.HoverFader is created for each menu. Each instance manages the color fade effect for all the links in a menu, allowing each menu to have different effect settings. Mouse over the links in the menus to experience the different color settings for each. Notice that, while the first three menus have pretty short fade-out times, the fade-out time in the last two menus is quite long, and the fade-in time is longer as well.
The Uize.Widget.HoverFader class lets you fade color CSS style properties (such as color, backgroundColor, borderColor, borderColorTop, etc.), as well as position and dimension properties (such as padding, margin, fontSize, borderWidth, borderLeftWidth, etc.). You can also set the fade-in and fade-out durations, as well as other properties of the fade-in and fade-out (such as acceleration and deceleration). Take a look at the source code for this page to see how the menus are configured with different settings. Worth noting is that this example uses the declarative syntax for widget adoption, so you will see the widget declarations next to the HTML for the individual menus.