JQuery: hiding images on page load

Question

I need to hide the pictures when my webpage is loaded, and make them later (they are triggers for other divs that appear / disappear). The reason is because I don't want them to be clickable until my .animate () function actually makes them real ..
Anyway, I tried just ...

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

... with HTML ...

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

... and 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 does not work.

Any ideas?

Answer 1

First, I would put a JS warning in your (documentary) .ready function to make sure the code got right (jQuery links, JS syntax is ok). Also, check by adding a clock to Mozilla Firebug (or another JS debugger) that jQuery picks objects correctly ("img1", "img2").

You can also try simply adjusting the img style to display: none in the markup if it always hides when the page loads every time.

those.

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

the above logic can be ported to CSS.

Then just use the animate () function when they should show the images.

Answer 2

Try it. opacity: 0; delete line.

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

Answer 3

Try this one

 $(document).ready(function(){ $("#img1").css({display, 'none'}); $("#img2").css({display, 'none'}); }); 

Answer 4

Add a class to all images and set the visible property, hidden by default, and later in your animation function or something else, delete this class. he will work

 <style> .hiddenclass { display:none; } </style> <img src="imgs/image1.jpg" class="hiddenclass"></img> <img src="imgs/image2.jpg" class="hiddenclass"></img> ------ <img src="imgs/image3.jpg" class="hiddenclass"></img> 

and in your animation script remove hiddenclass from all images using removeClass

Answer 5

You can also use the .html() function

See an example: http://jsfiddle.net/ipsjolly/jLNKL/