CODEWITHSUNDEEP
jqueryhtmlfunction
Aenil
Aenil

Reputation: 13

jquery fadein not showing

Hey guys im trying to work out something with jquery and im a complet noob with javascript.

So lets first show you my code:

<html>
<head>
    <style>
        #circle { background: #f00; width: 200px; height: 200px; border-radius: 100%; display: none;}
    </style>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
    function showAllSlowly()
    {
        $('#circle').fadeIn('slow', function() {
            //complete
        });
        alert("Showing elements");
    };
    </script>
</head>

<body onLoad=showAllSlowly()>

<div id="circle"></div>
</body>

When i set the alert before the $('#circle') i can see it but not after so i guess my problem is within that function. And im using exactly the same one from the jquery website.

Any idea what im doing wrong?

Upvotes: 0

Views: 93

Answers (2)

staircasebug
staircasebug

Reputation: 144

Or you can run the function as an immediately invoked Function on doc load.

Link: http://jsfiddle.net/RUwXZ/

$(document).ready(function(){

(function showAllSlowly() {
        $('#circle').fadeIn('slow', function() {
            alert("complete");
        });
    })();

});

Upvotes: 2

lukeocom
lukeocom

Reputation: 3243

I cant seem to reproduce the error you're encountering. See this fiddle - http://jsfiddle.net/2SCRv/

Placing the alert before, after or within the #circle selector all work fine. Can you provide a jsFiddle example that reproduces the error?

Using onLoad is fine, although an even easier way is using the document ready function, which you are most likely already familiar with, and which achieves the same result. 

$(document).ready(function(){

    $('#circle').fadeIn('slow', function() {
           alert("Showing elements");
    });            
});

Upvotes: 1

Related Questions