In this example, the
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.
Uize.Widget.HoverFader class lets you fade color CSS style properties (such as
borderColorTop, etc.), as well as position and dimension properties (such as
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
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.