jQuery .fadeIn not working

Question

I am working on a website, and I want a text to fade in whenever I open the webpage, so I did something like this :

$(document).ready(function() {
    $('#title').fadeIn(100);
});

I created a span with an id of 'title', then I used CSS to give him an opacity of 0, but it doesn't work.

Thanks

Answer 1

Instead of tinkering with the opacity hide the element:

#title{
    display:none;
}

Another thing you need to fix is the duration of the fadeIn. You should specify it in milliseconds and anything faster than 500 milliseconds will not be visible to the human eye. I would suggest going with 1 full second to allow users to appreciate the transitional effect:

$(document).ready(function() {
    $('#title').fadeIn(500);
});

Answer 2

I finally found the problem. It's in the HTML code :

Instead of this,

<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

the code should look like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

Answer 3

Remove your opacity css and use display:none:

HTML

<h1 id="title" style="display:none">Whoa!</h1>

JS

$(document).ready(function() {
    $('#title').fadeIn(500);
});

Fiddle