In this example, the
Uize.Widget.HoverFader is created and wired up to the thumbnail nodes for each thumbnail set. Each instance manages the fade effect for various CSS style properties for all the thumbnails in its set. Try mousing over the thumbnails to experience the animation effect, comparing the effect from one set to the next.
Uize.Widget.HoverFader class lets you fade a wide variety of different CSS style properties, including
height, and many more. 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 thumbnails are wire up with this effect, and how different CSS style properties are being faded for each thumbnail set. 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 thumbnail sets.