Using JQuery & The CSS Transition Property To Create Interesting Transitions

We had the idea today of making the top of the website, the header images, transition more fluidly. We don't like how they fade in so abruptly, even though that's a good solution for them to just pop in. We used to use jQuery's $().animate({ }); to animate things like opacity and whatnot. In order to animate CSS Filters to create a more robust animation you have to use the CSS Transition property. If the starting point of your image's CSS looks like this...

• <img></img>
• <style>
• img{
• filter: grayscale(1); /* image is turned to grey on load */
• opacity: '0'; /* image has zero opacity, meaning it's invisible */
• transition: '2s'; /* any change in CSS will require a 2 second transition */
• }
• </style>

...you will be able to transition that element to full opacity and color by changing the CSS by adding this...

• <script>
• $('img').css({
• 'filter':'none', //-> remove the greyscale filter, producing color
• 'opacity':'1' //-> change opacity to 1, meaning fully visible
• });
• </script>

The element will fade in, the color will fill, all within two seconds, which is what the transition property stated when you originally set the CSS of the image. We found that pretty interesting.