[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

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.
0
colonelblue
Asked:
colonelblue
  • 5
  • 5
  • 2
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now