If you go to google, 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?

[edit] since I don't use jQuery, I don't want to include it just to use this feature

If you go to google., 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?

[edit] since I don't use jQuery, I don't want to include it just to use this feature

• javascript
• html
• css
• ajax

• You could use jQuery fadeIn and fadeOut functions to achieve the same effect. – Andre Pena Commented Jan 17, 2010 at 15:47
• 7 Hi, I can't walk, but would like to easily get around. Since I don't want to pay for a wheelchair, is there anything else that will magically let me get around with ease? – Yuriy Faktorovich Commented Jan 17, 2010 at 15:54
• I hope you consider using jquery. You could let google serve it for you, it is likely the library will be cached and readily available for you on the users machine: encosia./2008/12/10/… – Yuriy Faktorovich Commented Jan 17, 2010 at 16:01
• 2 You don't want jQuery, but have you considered view source or firebug? – Tobu Commented Jan 17, 2010 at 16:02
• Yuriy Faktorovich said it right. Only one correction - the wheelchair is free :) – Ariel Commented Jan 20, 2010 at 0:06

7 Answers 7

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.

You could use jQuery and add an onmousemove callback on the tag that fades a hidden div with id "mymenu" in, something like:

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

Warning: this was typed here, so I dunno if it piles ootb.

I've never looked at it, but it's only logical to assume that there's a timer that gets started at load time for the page, and that adjusts either the alpha for the specified element or the opacity of another element that overlays it, in that element's CSS. Every timer tick, the numbers get turned up/down a little and the text bees a bit more legible. When full visibility is reached, the timer is turned off.

JQuery is a finished, ready to use implementation of this in a cross-platform patible package. You just add it, stir it up and it's done.

If you choose not to take the advice of the other answers, you'll have to research and implement the strategy from my top paragraph on your own. Good luck!

This is actually a rather plex 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.

I would think that they set the initial opacity of the elements other than the search box to zero. When the mouseover event is fired, the elements' opacity is gradually increased to 1.

Edit: In code it would look something like this:

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);

You may need to tweak the parameters to get a smooth animation.

@Georg, that example works on Firefox 3.5 too. :-)

Demo: PURE CSS http://jsfiddle/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;
}