How does Google achieve the fading effect on the home page?

Question

If you go to google.com, you notice the menu on top slowly appears once you have mouse over the page. I was wondering what does Google use to control the fading effect?

Answer 1

There are two ways.

Javascript

Works in most browsers.

Gradually change the CSS opacity attribute of an element using Javascript. That's easiest with a good framework like jQuery, but is quite simple to do yourself.

function fadeIn() {
    var element = document.getElementById("someID");
    var newOpacity = element.style.opacity + 0.05;
    element.style.opacity = newOpacity;
    if (newOpacity < 1) {
        window.setTimeout(fadeIn, 50);
    }
}

Pure CSS

Only supported in Webkit at the moment.

#someID {
    opacity:0;
    -webkit-transition: opacity 1s linear;
}
#someID:hover {
    opacity:1;
}

For an example have a look at the Surfin' Safari blog.