JQuery in Firefox: Bilder verblassen von Schwarz, nicht von den anderen Bildern

Question

Ich habe eine Art seltsames Problem: Ich möchte Bilder verblassen. Der Code funktioniert, aber der Fading-Effekt sieht zumindest im neuesten Firefox aus. Aber auf anderen Seiten (im Web) funktioniert es offenbar im selben Browser. OK, hier ist mein Code:

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

So ist dieses Setup recht einfach: ich zwei divs bekam beide absolut positioniert. Das div mit der Klasse "firstpic" ist IN div mit der Klasse "fade". Beide enthalten ein img-Element. Das div mit der Klasse "firstpic" ist standardmäßig nicht sichtbar (siehe CSS), so dass es eingeblendet werden kann. Das Einblenden wird durch einen Knopfdruck ausgelöst (siehe Javascript). Aber anstatt schön zu verblassen, verblasst es mit einem schwarzen Hintergrund. Ich denke es könnte an dem "img" -Element liegen. Wenn ich zwei divs mit css-Hintergrundbildern verwende, verblasst es gut. Aber ich brauche img-Elemente, da ich die Bilder skalieren muss. Jede Hilfe würde wirklich geschätzt werden. Vielen Dank.

Answer 1

Dies ist ein Problem, das in neueren Versionen von Firefox auftaucht. Gib den Bildern einen CSS-Hintergrund