Question

我需要在加载我的网页时隐藏图片，并让它们稍后出现（它们是其他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;
}

......但它没有用。

有什么想法吗？

Answer 1

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

你也可以尝试将img的样式设置为在标记中显示：none，如果它总是在每次页面加载时隐藏。

即，

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

上述逻辑可以转移到CSS。

然后在需要显示图像时使用你的animate（）函数。

Answer 2

尝试这个。 opacity: 0;行删除。

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

Answer 3

试试这个

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

Answer 4

为所有图像添加一个类并默认设置隐藏的可见属性，稍后在您的动画函数或其他内容中删除该类。它会起作用

<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>

并在动画脚本中使用hiddenclass

从所有图片中删除removeClass

Answer 5

您还可以使用.html()功能

参见示例：http://jsfiddle.net/ipsjolly/jLNKL/

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

5 个答案: