Javascript / CSS - fading in an image which doesn't appear?

When my webpage loads, I want there to be links. Once all the links are clicked, I want an image to fade in on the bottom of the page (the image says 'complete' which basically means the user has completed clicking all the links). I first hide the image when the webpage loads, like so;

<html>
    <body>
        <!-- links which need to be clicked go here -->
        <img id='complete' src='../images/complete.png' alt='' />
    </body>
</html>

<style>
    #complete {
        visibility: hidden;
    }
</style>

<script>
    // once all links are clicked
    $('#complete').fadeIn();
</script>

With this code, #complete does not fade in (probably because visiblity is set to hidden). I tried making visiblity set to visible right before the fade in command but that still didn't make it fade in. I also tried making the css

#complete {
    filter: alpha(opacity = 0);
}

and the script

$('#complete').fadeTo('slow', '100');

and that doesn't work, #complete just appears really fast rather than fading in slowly. I am using IE8 with CSS, any idea on how to fix this?

Solution

on css

#complete {
display: none;
}

and on javascript

$('#complete').fadeIn();

And try to use latest jquery

<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>

See it on action: http://jsfiddle.net/KUqJL/ your problem is what I said about css