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();
});

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

首先,我会尝试在您的(文件)中设置一个 JS 警告。准备好功能以确保代码被正确击中( JQuery 引用, JS 语法可以 ) 。此外, 通过在 Mozilla Firebug ( 或其他 JS 调试器) 中加个手表检查 JQuery 正在正确接收对象 ( “ img1 ”, “ img2 ” ) 。

您也可以尝试设置 Ing 的样式以显示: 在标记中没有显示, 如果它总是被隐藏在每次页面加载上的话。

I.e.,

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

上述逻辑可以移到 CSS 。

当需要显示图像时, 请使用您的动画功能。

Answer 2

尝试此选项。 不透明: 0; 行删除。

http://jsfidle.net/2wqwwf/2/" rel="无尾随" >http://jsfidle.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>

在动画脚本中,使用 removeClass 从所有图像中删除 hidden类

Answer 5

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

例如:http://jsfiddle.net/ipsjolly/jLNKL/

友情链接