jQuery：在页面加载时隐藏图片

我需要在加载我的网页时隐藏图片,并让它们稍后出现(它们是其他div出现/消失的触发器).原因是我不希望它们是可点击的,直到我的.animate()函数实际上使它们看起来真实.
所以无论如何,我尝试了一个简单的……

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

…用HTML …

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

……和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;
}

……但它不起作用.

有任何想法吗？

解决方法

首先,我会尝试在你的(document).ready函数中添加一个JS警报,以确保代码被正确命中(jQuery引用,JS语法都可以).另外,通过在Mozilla Firebug(或其他JS调试器)中添加一个手表来检查JQuery正在正确地拾取对象(“img1”,“img2”).

您还可以尝试将img的样式设置为display：none,如果它总是在每次页面加载时都隐藏在标记中.

即,

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

上面的逻辑可以移动到CSS.

然后在需要显示图像时使用animate()函数.