Internet Explorer: fadeIn(); and position: absolute;

I have a problem using fadeIn() on div that contains elements which positions are absolute. Earlier I made a post but it seems that people did not understand my problem because I did not put it clearly enough. Here is a code example, works on every browser except IE - http://jsfiddle.net/Ayy6W/3/

开发者_StackOverflow中文版

The reason I need this is because I want to create something similar to http://www.timmacpherson.com/ but using jQuery instead of Flash. So I need to put those horizontal lines and texts manually on my fixed sized wrapper. I hope you understand what I'm trying to do here and maybe there is some other way.

---

As you probably have found, this is a common bug in IE. One solution would be to wrap the faded element in an absolutely positioned element and have the faded element display inline-block. Here's the updated fiddle that uses this method.

UPDATE

Another option based on your comment is to do just that: iterate over the different elements you want to fade in. Here is an example where you add the fadeIn class to each element and then iterate over them individually. In that case, the javascript would be as follows:

$("#hello .fadeIn").each(function(){
    $(this).hide();
    $(this).fadeIn();
});