JQuery в Firefox: изображения исчезают с черного, а не с других изображений

Question

У меня какая-то странная проблема: я хочу выцветать изображения. Код работает, но эффект затухания выглядит, по крайней мере, в новейшем Firefox. Но на других сайтах (в Интернете) он, видимо, хорошо работает в том же браузере. ОК, вот мой код:

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

Итак, эта настройка довольно проста: у меня есть два div, оба с абсолютным позиционированием. Div с классом "firstpic" - это div с классом "fade". Оба содержат один img-элемент. DIV с классом "firstpic" по умолчанию не виден (см. CSS), поэтому его можно добавить. Его появление вызывается нажатием кнопки (см. Javascript). Но вместо того, чтобы красиво исчезать, он исчезает на черном фоне. Я думаю, что это может быть из-за элемента "img". Когда я использую два элемента div с фоновыми изображениями css, он хорошо выцветает. Но мне нужны img-Elements, так как мне нужно изменить размер картинки. Любая помощь могла бы быть полезна. Благодарю.

Answer 1

Эта проблема возникла в более поздних выпусках Firefox. Дайте изображениям фон CSS