JQuery not working when I load the page

Question

I am trying to fade in whatever shows up in (div id="content").

I have this to load JQuery to the page:

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="rocoffee.js"></script>

And here is what is in rocoffee.js

$(function(){
$('#content').fadeIn('slow');
});

I have yet to see this event take place when I load my page.

Note: I do have a jquery.js file to use, but I tried to use the above based on answers I've read. Same outcome regardless.

Can we see the HTML too? It'll help to give some more context to the situation. Also, check the console to see if there are any errors which would prevent this from happening. — Tango Bravo, Oct 13 '12 at 14:58

score 4 · Answer 1 · answered Oct 13 '12 at 15:02

4

You need to hide it first!

http://jsfiddle.net/wVTab/

$(function(){
    $('#content').hide();        
    $('#content').fadeIn('slow');
});

answered Oct 13 '12 at 15:02

Timm

12,553
4
31
43

Wow, that was obvious. I thought I had taken care of that in my css, I guess not. Thanks – Oct 13 '12 at 15:06

score 2 · Accepted Answer · answered Oct 13 '12 at 15:03

2

As no HTML code is availabe, i would assume that the div is initially visible, and therefore suggest that fadeIn does not make much sense.

Try setting the div hidden.

answered Oct 13 '12 at 15:03

Rudolf Mühlbauer

2,511
16
18

score 1 · Answer 3 · answered Oct 13 '12 at 14:58

1

Try using:

$(document).ready(function(){
    $('#content').fadeIn('slow');
});

instead

answered Oct 13 '12 at 14:58

Arthur

1,433
1
18
35

1

compare with http://stackoverflow.com/a/5749828/1689451 -- the OPs syntax is ok. – Rudolf Mühlbauer Oct 13 '12 at 14:59
2

that makes no difference - the 2 methods are equivalent http://api.jquery.com/ready/ – Zoltan Toth Oct 13 '12 at 15:01
The `$(function(){ });` form is an alias to jQuery's DOMReady function. – Tango Bravo Oct 13 '12 at 15:01
Yeah, thanx ^^ As everyone else here stated, it was kinda obvious that a div should be `invidible` first for it to `fadeIn` – Arthur Oct 13 '12 at 15:10

JQuery not working when I load the page

3 Answers3