jquery - jQuery: ページの読み込み時に画像を非表示にする

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 のスタイルを display:none に設定することもできます。

すなわち、

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

上記のロジックは CSS に移動できます。

次に、画像を表示する必要があるときに animate() 関数を使用します。

Answer 2

これを試してみてください。opacity: 0;行削除。

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

Answer 3

すべての画像にクラスを追加し、デフォルトで非表示の表示プロパティを設定し、後でアニメーション関数などでそのクラスを削除します。それが動作します

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

これを試してみてください

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

Answer 5

.html()関数も使えます

例を参照してください: http://jsfiddle.net/ipsjolly/jLNKL/