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
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Create Twitter-Style Buttons with the Dojo Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...


  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!