4

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

...但它不工作。

有任何想法吗？

4

5 回答 5

4

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

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

IE，

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

上面的逻辑可以移到 CSS 中。

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

于 2012-05-21T12:01:42.460 回答
4

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

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

于 2012-05-21T12:08:37.403 回答
1

试试这个

$(document).ready(function(){
    $("#img1").css({display, 'none'});
    $("#img2").css({display, 'none'});
});
于 2012-05-21T11:53:11.707 回答
1

为所有图像添加一个类并默认隐藏可见属性，稍后在您的动画功能或其他东西上，删除该类。它会起作用的

<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

于 2012-05-21T11:58:04.300 回答
1

你也可以使用.html()函数

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

于 2012-05-21T12:08:16.903 回答