How does Google achieve the fade effect on the homepage?

Question

If you go to google.com, you will notice that the menu at the top slowly appears when you hover over the page. I was wondering what Google uses to control the fading effect?

[edit], since I do not use jQuery, I do not want to enable it just for using this function

Answer 1

There are two ways.

Javascript

It works in most browsers.

Gradually change the opacity attribute of the CSS element using Javascript. This is easiest with a good structure, such as jQuery , but it's pretty simple to do.

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

Webkit.

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

Surfin 'Safari blog.

Answer 2

jQuery onmousemove , div id mymenu, :

$("html").one("mousemove", function() {
 $("#mymenu").fadeIn("slow")
});

: , , ootb.

Answer 3

, , , , , , , CSS. , /, . , .

JQuery - , - . , .

, . !

Answer 4

, , , . mouseover , 1.

: :

var hiddenStuff = document.getElementByClassName("hiddenStuff");

var interval=document.setInterval(function() {
    for (var i=0; i<hiddenStuff.length;i++){
        hiddenStuff[i].style.opacity+=0.1
    }
    if (hiddenStuff[1].style.opacity===1){
        window.clearInterval(interval);
    }
}, 100);

, .

Answer 5

, . :

• opactity float.
• float.
• - , - - .01/ms, ?
• setInterval , , : setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); - , , .

Answer 6

@Georg, Firefox 3.5.: -)

Answer 7

: PURE CSS http://jsfiddle.net/6QS2a/1/

</div>

CSS

.item {   
  height:150px;
  width:150px;
  border-radius:100%;
  background:skyblue; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    opacity:0.2;
}

.item:hover {
  opacity: 1;
}