JAVASCRIPT EXAMPLES Hover Fader for Thumbnails
In this example, the Uize.Widget.HoverFader widget class is being used to add a JavaScript animation effect to the thumbnails in several different sets of thumbnails (seen below). An instance of 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.
The Uize.Widget.HoverFader class lets you fade a wide variety of different CSS style properties, including color, backgroundColor, borderColor, margin, letterSpacing, textIndent, lineHeight, opacity, left, top, width, 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 acceleration and 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.