jquery - jQuery 1.4.2 shows solid color in IE instead of respecting opacity

Question

Please have a look at this demo page that I cooked up a while ago:

http://www.s3maphor3.org/demo/hotbox/

This is a custom lightbox that is triggered upon holding the space key. The way it works is quite simple. There are two hidden divs on the page, one for the content of the lightbox and one that holds the darken layer (opacity 70%). The z-index of the darken layer is one less than that of the lightbox. Upon holding the space key, a simple jQuery script does a .show() on both divs.

This demo works fine, but it broke down when I used it in another project: IE7 and 8 did not show a 70% dark layer, instead it shows a solid black background. I spend many hours trying to check the differences between the original demo that works and the version I use in the other project. Eventually I nailed it: the difference is in the jQuery version.

The original demo uses jQuery 1.3.1 whilst in my new project I'm using jQuery 1.4.2. Something must have changed in the new jQuery library, but I'm having a hard time finding out what and how to work around it. I can stay on 1.3.1 but eventually I will have to fix this somehow.

Answer 1

这么快回答我自己的问题有点蹩脚，但我找到了解决方法。在显示之前在 javascript 中设置不透明度（尽管 CSS 已经有了该规则）似乎可以解决问题：

$('#darken').css('filter', 'alpha(opacity=70)');
$('#darken').show(0);

这会在屏幕上显示一个微小的 flickr，因此我愿意寻求更好的解决方案。