jQuery: hiding pictures on page load

Question

I need to hide pictures when my internet page is loaded, and make them appear later on (they are triggers for other divs appearing/disappearing). The reason is that i don't want them to be clickable until my .animate() function actually makes them appear for real..
So anyways, I tried a simple...

$(document).ready(function(){
    $("#img1").hide();
    $("#img2").hide();
});

...with the HTML...

<img id="img1" src="./images/img1.png" alt="image 1" />
<img id="img2" src="./images/img2.png" alt="image 2" />

...and the CSS

#img1
{
z-index: 4;
position: relative;
top: 0%;
left: 5%;
opacity: 0;
padding: 20px;
}
#img2
{
z-index: 4;
width: 350px;
height: 140px;
position: relative;
top: 0%;
left: 15%;
opacity: 0;
padding: 20px;
}

...but it is not working.

Any ideas?

Answer 1

Firstly I would try putting a JS alert in your (document).ready function to make sure that the code is being hit correctly (jQuery references, JS syntax are ok). Also, check via adding a watch in Mozilla Firebug (or other JS debugger) that JQuery is picking up the objects correctly ("img1", "img2").

You could also try just setting the style of img to display:none in the markup if it is always going to be hidden on page load every time.

I.e.,

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

the above logic could be moved to CSS.

Then just use your animate() function when they're required to show the images.

Answer 2

Try to this one. opacity: 0; line delete.

http://jsfiddle.net/2wqwf/2/