CAN IE7 display two divs with different opacity on top of one another?

I'm trying to build a simple crossfade effect. I use two divs containing images. Both have "position: absolute" attribute and a negative z-index.

I apply a tween-function to the opacity style-attribute in Firefox and Chrome. I us开发者_StackOverflowe filter:alpha(opacity = foo) for IE.

I see my 'old' image fade out, but the 'new' image is displayed at full opacity immediately, on top of my 'old' image, regardless of z-index and opacity value.

I know IE7 has some problems with opacity, but I'm not sure this is one of them. I'm using JPEG files, not .PNGs. Can anybody explain what I'm doing wrong?

Some code:

var temporaryDiv = document.createElement("div");
var temporaryDivImage = document.createElement("img");
document.body.appendChild(temporaryDiv);
temporaryDiv.appendChild(temporaryDivImage);   
temporaryDivImage.src = backgroundPictures[currentPicture + 1];           
temporaryDiv.setAttribute("style", "overflow: hidden; filter: alpha(opacity=0); position: absolute; z-index: -2;");    
document.body.appendChild(temporaryDiv);

var background = document.getElementById("background");        

 if (isIE7 == true) {           
    Tweens[0] = new Tween(temporaryDiv.style, "filter", Tween.linearIn, 0, 100, 2000, "alpha(opacity=", ")");    
    Tweens[1] = new Tween(background.style, "filter", Tween.linearIn, 100, 0, 2000, "alpha(opacity=", ")");
} 

css:

body {
    margin: 0px;
    width: 100%;
    height: 100%;

}

#background {    
    position: absolute;
    overflow: hidden;
    z-index: -1;
}

Thanks a lot

Have you tried to add layout to these elements for ie7? I.e. for both elements (for which you want to change opacity) set css property “zoom” (ie-specific) with value “1” and see if it helps. Usually that helps :)