Black & White / Color CSS + Jquery Transition (final)

This is to be the final test for Black & White to Color transitions. This is the most satisfactory of the three. A test has already been performed for Black & White to color using two images and CSS. Creating and storing two images for this effect would work well for static sprites and small projects. A test was also performed using CSS plus Jquery plus HTML5 (Canvas). Having something better to compare this test to reveals an additional flaw: inline width/height CSS requirements.

This final test uses a small bit of jquery, but the script is automated and called by class. It has also been written to compensate for a fade-in effect and lacks some of the other quirks with the last test that are probably only evident to me. The effect functions well in Chrome, Firefox, Opera and Safari. The positioning, however, is a little tweaked in Safari and Opera, although I am sure this would be easy to remedy. I need to gather this into a collective post.

Final conclusion: I don’t really have any desire to be a fish, but that island looks mighty inviting.