ansaurus

Question

jQuery How do you get an image to fade in on load?

Answer 1

A:

Try this one 1) include your jQuery library

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
    google.load("jquery", "1.3");
</script>

2) this is the function you want to use probably

<script type="text/javascript">
    $(document).ready(function(
    $('#logo').fadeIn("slow"); 
    ));

</script>

Aviatrix 2009-09-05 17:50:52

Answer 2

+8 A:

You have a syntax error on line 5:
$('#logo').hide();.fadeIn(3000);
should be:
$('#logo').hide().fadeIn(3000);

Traveling Tech Guy 2009-09-05 17:51:44

There are actually a bunch of errors in the JavaScript.

Darryl Hein 2010-03-13 22:16:10

Answer 3

+4 A:

Simply set the logo's style to display:hidden and call fadeIn, instead of first calling hide:

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>

karim79 2009-09-05 17:51:53

Still cant get it to work! :(

Cool Hand Luke UK 2009-09-05 18:26:23

@Cool Hand Luke UK - did you try @Traveling Tech Guy's solution?

karim79 2009-09-05 19:01:53

Please see my note on the document ready issue with this question - it's quite an important distinction.

Sohnee 2010-03-26 20:41:07

Answer 4

A:

I figure out the answer! You need to use the window.onload function as shown below. Thanks to Tec guy and Karim for the help. Note: You still need to use the document ready function too.

window.onload = function() {$('#logo').hide().fadeIn(3000);};

Cool Hand Luke UK 2009-09-06 14:39:36

You should not be setting .onload if you're using jQuery.

Frank Schwieterman 2010-03-11 17:51:12

Answer 5

+3 A:

window.onload is not that trustworthy.. I would use:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>

J. Hendrix 2010-01-11 01:54:05

Please see my note on the document ready issue with this question - it's quite an important distinction.

Sohnee 2010-03-26 20:41:51

Why do you consider window.onload to not be trustworthy?

Dan Williams 2010-09-10 20:53:47

Answer 6

+1 A:

mykstor 2010-03-13 21:57:15

Hello @mykstor - I understand your frustration and have added a comprehensive answer to this question. I hope this helps to clear up some of your concerns.

Sohnee 2010-03-26 20:43:00

Answer 7

+3 A:

Hello World!

This thread seems unnecessarily controversial.

If you really want to solve this question correctly, using jQuery, please see the solution below.

The question is "jQuery How do you get an image to fade in on load?"

First, a quick note.

This is not a good candidate for $(document).ready...

Why? Because the document is ready when the HTML DOM is loaded. The logo image will not be ready at this point - it may still be downloading in fact!

So to answer first the general question "jQuery How do you get an image to fade in on load?" - the image in this example has an id="logo" attribute:

$("#logo").bind("load", function () { $(this).fadeIn(); });

This does exactly what the question asks. When the image has loaded, it will fade in. If you change the source of the image, when the new source has loaded, it will fade in.

There is a comment about using window.onload alongside jQuery. This is perfectly possible. It works. It can be done. However, the window.onload event needs a particular bit of care. This is because if you use it more than once, you overwrite your previous events. Example (feel free to try it...).

function SaySomething(words) {
    alert(words);
}
window.onload = SaySomething("Hello");
window.onload = SaySomething("Everyone");
window.onload = SaySomething("Oh!");

Of course, you wouldn't have three onload events so close together in your code. You would most likely have a script that does something onload, and then add your window.onload handler to fade in your image - "why has my slide show stopped working!!?" - because of the window.onload problem.

One great feature of jQuery is that when you bind events using jQuery, they ALL get added.

So there you have it - the question has already been marked as answered, but the answer seems to be insufficient based on all the comments. I hope this helps anyone arriving from the world's search engines!

Sohnee 2010-03-26 20:39:56

Answer 8

A:

Hello,

I'm also trying the same thing. But I want a delay in it.

Like this:

$(document).ready(function() { $('#fadein1').hide().delay(800).fadeIn(1600); $('#fadein2').hide().delay(800).fadeIn(1600); });

But the delay will not work. What am I doing wrong!???

vdekker.nl 2010-08-27 20:07:40

Answer 9

A:

Using the examples from Sohnee and karim79. I tested this and it worked in both FF3.6 and IE6.

<script type="text/javascript">
    $(document).ready(function(){
        $("#logo").bind("load", function () { $(this).fadeIn('slow'); });
    });
</script>

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>

Max 2010-09-21 20:38:16

ansaurus

tags:

views:

answers:

jQuery How do you get an image to fade in on load?

related questions