Google-Style Element Fading Using MooTools or jQuery

By  on  

Google Homepage

Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter -- no need for more clutter. Here's how you can implement a similar system with MooTools or jQuery.


	<div id="fade1" class="fadein">{ fade area 1 }</div>
	<div id="fade2" class="fadein">{ fade area 2 }</div>
	<div id="fade3" class="fadein">{ fade area 3 }</div>
	<!-- other stuff here -->

Place the HTML where you'd like -- it has no bearing on our system besides needing each element to have the fadein CSS class.


@media all {
	.fadein	{ visibility:hidden; }
	#fade1	{ /* place wherever on the page */ }
	#fade2	{ /* place wherever on the page */ }
	#fade3	{ /* place wherever on the page */ }
@media handheld {
	.fadein	{ visibility:visible; }

The elements that will fade in will need to have their visibility set to hidden. We'll accommodate for the no-JavaScript user below.

The MooTools JavaScript

/* via @appden, Scott Kyle, */
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);

/* make it happen! */
window.addEvent('domready',function() {
	var fades = $$('.fadein').setStyle('opacity',0);
	var doFadeIn = function(e) {
		if(!e.key || e.key == 'tab') {

When the DOM is ready, we grab all of the elements that are mean to fade in and...get this...fade them in.

The jQuery JavaScript

$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);

This is the equivalent jQuery JavaScript code.

Accommodating for No-Javascript Users

	<style type="text/css">
		.fadein	{ visibility:visible; }

We undo the initial hiding of the elements. Duh.

It's a subtle effect but a good idea on Google's part.

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • By
    Truly Responsive Images with responsive-images.js

    Responsive web design is something you hear a lot about these days. The moment I really started to get into responsive design was a few months ago when I started to realise that 'responsive' is not just about scaling your websites to the size of your...


  1. needs the old: $("S").focus();

    or better: setTimeout(function(){$("S").focus();},100);

    Cool stuff though.

  2. For focusing on the element, yep. Added.

  3. Jean-Nicolas

    I still don’t see how this could be useful on a website.

  4. @Jean-Nicolas: I think it keeps the website from having unnecessary “clutter” until there’s a hint that the user may want it. Most people probably don’t do anything but search from that page — thus, keep it simple.

    • You’d think that you can implement a version that has the divs not only fade in when the mouse enters but also to fade back out after the mouse is idle?

  5. I can see that this could become useful to keep a user’s focus on a small subset of a page. But without an automatic time-out the user might just leave without exploring. Who really has time to do an easter-egg hunt for hidden content on a web page?? 5 seconds??

  6. Hi David, I tried your demopages, but only got some green stuff on the top of the page saying fade area 1, 2 and 3. But no fading. Tried on WinXP with Opera 10.10 and IE6. Visiting Google with these browser IE6 doesn’t do the fade but Opera does.

    In Safari the fade is on-page-load in your example. Only FF does the same as Google with your demos. Sorry I couldn’t give you a more helpful comment ;-)

  7. Dutchie

    @David, I think it would help your less experienced (moo) users if you explain what you are doing with the oneEvent/implement thing there. Now, I could have tried doing it myself, but I (still) have to do the dishes first! :) lol

  8. With Opera 10.10 i get the effect on-page-load – same as Sebastiaan with Safari. Tried both examples. FF 3.6 works well.

    Question(s): What’s “oneEvent” ? It’s not “onEvent”, right?
    What’s it’s advantage?

  9. Guido

    I want to add a event to Fade it Out.
    When they put the mouse out of the window I want that it disappear again.
    Could you make that for me?

    btw. very nice effect!

  10. Sorry for not explaining the oneEvent method guys. A oneEvent event fires only once on an element. It’s the equivalent of jQuery’s one event. In MooTools 2, this will be called the flash event.

  11. I already made my own version to google’s for a client, which is similar to yours David, funny enough.

    I must admit, the oneEvent is entirely new to me. You say it fires only once on an element? How do you need to see this when it’s put into practice?

  12. Very impressive and useful.

  13. Very nice!
    Does this work with jQuery 1.4?

  14. @David Walsh: Thx for the explanation!

  15. Another great work from you David :)
    I think pure CSS also can do this, here is my pseudo-code :

    body:hover .content {
     opacity: 1;
    .content {
     -webkit-transition: all .5s ease-in-out;
     opacity: 0;
  16. hamburger

    hey david,
    what is that line for?

    if(!e.key || e.key == 'tab') { ...

    is it not obsolete because

  17. Great!

    Exactly what i was looking for, any idea how to fade out again if there is no user input (mouse or keyboard). Im using jquery


  18. vamsi

    I am planning to use this for nav bar.. will search engines be able to see links ?

  19. Hi David.

    I am developing a new Website Using Joomla 1.5.15. Joomla 1.5 Is using MOOTOOLS 1.12 :(

    please help me To Use this Tips With Mootools 1.12

    Best regards. Thanks For The Tips

  20. I just noticed that Google does this inline:

    <html onmousemove=”google&&google.fade&&google.fade(event)”>

  21. I love your tutorials.. :) Just did this tut, and its active on my site: .. just move the mouse around, and you will see :)

    Thanks alot. All Credit to your awsome tut..

    One might wonder, why google choose to do it online, maby somthing to do with speed? Thats why they dont bother to validate ;)

  22. I don´t think ie8 likes thsi script that much, it loades even if I dont move the mouse.
    And I get some sort of wierd load of content.. Ill guess Ill wait until CSS3 is implemented overall.. and use Hidayat Sagita suggestion ;)

  23. shenanigans

    hey there,

    I tried to implement the fading effect in a website of mine. I need to confess, that I am a bloody beginner, when it comes to Mootools and jQuery. I added the code to separate .js files, which I linked to my html file (via the header). I also modified my css-file and added the class to the DIV I’d like to appear. However, this causes the whole DIV to disappear without showing up again. Firebug states that “$ is not defined — [Break on this error] $(document).ready(function() { ” (line1, jquery file) and ” Native is not defined
    [Break on this error] Native.implement([Element, Window, Document, Events], { ” (line 2, mootools file).

    As I said, I am really new to this — what could be the cause of my trouble, what do I have to modify and define? Where could I get further information regarding the implementation of mootools and jquery?

    Thanks a lot in advance, any help is appreciated :-)

  24. shenanigans

    aaaah… stupid me, didn’t include the the core files ;-) yep, I am a real beginner, so sorry for that ;-) it works!

    however, firebug now complains about $(document.body).oneEvent is not a function — $(document.body).oneEvent('mousemove',doFadeIn); (line19, mootools)

    any suggestions? cheers!!

  25. This doesnt seem to work with iPhone until you click something, swiping has no effect. I would assume it wouldnt work with iPad either….

    Any ideas?

  26. Dimis

    @Troy: You could always detect a device’s resolution and titles and send the appropriate code. :-)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!