How to make div with image inside slowly fade in when page loads.

I have a footer image that I would like to gradually fade in as the page loads.
What's a simple way to do this?
Thanks in advance.
colonelblueAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
"as the page loads"?
This really depends on how you're loading your page.

If the page is really loading (meaning getting it's HTML parsed) then there's no way to do this.
Instead you need to have a very simple page that includes that footer image and not much anything else then load all the other resources via ajax calls.
As the ajax responses arrive you can decrease the image transparency value.
0
colonelblueAuthor Commented:
OK LOL. Sorry typed under influence of ambien. When the page sloads the image then slowly fades in effect?
0
GaryCommented:
<div id="footer">blah</div>

CSS
#footer {
display:none
}

jQuery
$(function(){
$("#footer").fadeIn(1000); // adjust to control the speed
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Alexandre SimõesManager / Technology SpecialistCommented:
The easiest way is to use jQuery's fadeIn function

Here's a live demo: http://jsfiddle.net/AlexCode/c06r9x07/
<h1>Content</h1>
<img style="display:none;" src="http://www.mountvernonpubliclibrary.org/sites/default/files/Videos/free_birds_ver2.jpg" />

Open in new window

$(document).ready(function(){
    $('img').fadeIn(3000);  // take 3 seconds to fully show the image
});

Open in new window

Just don't forget to set the element you want to fade in as display:none. Otherwise it will always be visible.
0
colonelblueAuthor Commented:
Thank you Gary!
0
colonelblueAuthor Commented:
Please forgive me Alexandre Simões, I did not see your reply after Gary.
Thank you just the same Sir.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ah, somehow I didn't see Gary's reply and I just said the same :)

Cheers mate!
0
colonelblueAuthor Commented:
Hello Gary.
I was wondering, if I had lets say 12 items ( divs ) that I applied separate time to fade in each would that be acceptable, meaning it on;t slow down the page too much or use too much resource?
Thanks again Gary! :)
0
GaryCommented:
Thats no problem
0
Alexandre SimõesManager / Technology SpecialistCommented:
If you're curious about what does that little fade in animation have a look here:
https://github.com/jquery/jquery/blob/1.x-master/src/effects.js#L308

fadeIn is already a shortcut for the animate function that still delegates the work the the main Animation function.

So what I mean is that it's OK for you to use as many as you like, it will work, but be aware that in slower machines (like phones and tablets for instance) the effect might be not as smooth as you would like.
0
colonelblueAuthor Commented:
Thank you again Gary.

Alexandre , thank you but what is that?
A page full of animation effects , like  a spice rack I can call on from any element?
I'm not much of a jquery coder, so how would you call or apply those to say a div called ("example) or an image or something?
I learn by example where I can correlate what matches to what so I wouldn't know how to apply this to an element.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Like Gary said, it's OK to use it but I'm always careful on the amount.
Too many animations have a cost, maybe not noticeable on a good machine but surely visible on a low powered one.

...what is that
It's jQuery source code.
I like to know what's under the hood of my APIs so that's why I pointed you to the source code of jQuery.
jQuery is "just" JavaScript so no black magic there.
If you ever have doubts about performance related to jQuery functions, just dive into the code.
There's a lot we can learn from there and at the same time know exactly the cost, in this case, of animations.

With this knowledge you can better decide if you should use it or not instead of just believing when we say it's OK :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.