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

This is actually a rather complex thing to do because of the cross browser differences. The basics are something like the following:

1. Get the current opactity of the element as float.
2. Determine the ending opacity as float.
3. Determine your rate speed - i dont know what this should be in raw terms - somthing like .01/ms maybe?
4. Use a setInterval to fire a function that increases the opacity by your rate where: setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); Somewhere in ther though you need to check if youve reached the endpoint of your animation and shutdown your interval.