奇妙な問題が発生しました。画像をフェードさせたいのです。コードは機能しますが、少なくとも最新の Firefox では、フェード効果がおかしいように見えます。しかし、他のサイト (Web 上) では、同じブラウザーで問題なく動作するようです。OK、これが私のコードです:
HTML:
<div class="fade">
<img src="http://localhost/ami/wp-content/gallery/ami/400_1.jpg" alt="test" />
<div class="firstpic">
<img src="http://localhost/ami/wp-content/gallery/ami/400_2.jpg" alt="test2" />
</div>
</div>
CSS:
.fade{top: 115px; left: 290px; position: absolute; display: block;}
.firstpic{position: absolute; top: 0px; left: 0px; display: none;}
Javascript:
$("#button").click(function(){
$(".firstpic").fadeIn(800);
});
したがって、このセットアップは非常に簡単です。2 つの div があり、どちらも絶対位置に配置されています。クラス「firstpic」の div は、クラス「fade」の div の中にあります。どちらも 1 つの img 要素を含んでいます。クラス "firstpic" を持つ div は、デフォルトでは非表示 (CSS を参照) であるため、フェードインできます。フェードインは、ボタンを押すことによってトリガーされます (Javascript を参照)。しかし、きれいにフェードインする代わりに、黒い背景でフェードインします。「img」要素が原因である可能性があると思います。css-background イメージで 2 つの div を使用すると、うまくフェードします。ただし、画像のサイズを変更する必要があるため、img-Elements が必要です。どんな助けでも本当に感謝しています。ありがとう。