UIZE JavaScript Framework

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.

Image and Title Move Up Together
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Image Moves Up, Title Slides in from Right
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Image Moves Down, Title Slides and Shrinks in from Bottom
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Title Bar Rolls Down Below Image, Fades from White to Black
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Title Bar Rolls Down Below Image, Border Color Fades
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Zoomed in Image Fades in Over Zoomed Out, No Title
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean
Image is Scaled Up With Animation for Zoom in Preview, No Title
San Fran Sunset
Shadow of Past
Hook in the Wall
Retirement Home
Heavens Open
Window Lean