Creating a Google-style background image fader?

Question

Hey guys. If you haven't already seen, Google has the ability to add a custom background image (for better or worse) and I was wondering how to achieve the same fade-in-on-load effect using jQuery.

Any ideas?

Answer 1

jQuery has a method for this purpose, fadeIn. See documentation for explanation.

.fadeIn( [ duration ], [ callback ] )

durationA string or number determining how long the animation will run.

callbackA function to call once the animation is complete.

As an aside, fade is often implemented to use javaScript to continually modify the opacity of an element.

Answer 2

http://stackoverflow.com/questions/1383870/jquery-how-do-you-get-an-image-to-fade-in-on-load

Check this answer

Answer 3

The real question is how do they resize the image on resizing the browser ... fading it in is easy :) you can also do $("#selectdiv").hide().animate({opacity : 1});

I think fadeIn is just a shortcut to that annyway