Let’s start with some content that we want to fade in and out. In this case we’ll make a simple widget that displays a series of rotating banners to your site visitors.
First, we’ll create two container div elements to hold our banners.
1 2 3
You’ll notice that I’ve set the bannerContainer position to “relative” and provided a fixed size (height and width) to the outerContainer div. Both will be very important later on.
Next, lets add the content that we want to fade in and out. In this case, div’s that will hold our banners.
1 2 3 4 5 6 7 8 9 10 11 12 13
Here I’ve set the banner div style display property to “none” to give a starting point where all the banners are hidden; we’ll dynamically pick the first banner to display with a bit of jQuery code.
Finally, we’re going to add the thing that will make all of this work. I call it, “the hat”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
bannerHat is a child of bannerContainer who’s style is set to position: absolute, top: 0 and left: 0, and display: none. Additionally the bannerHat has the same display style (size, background, etc) as outerContainer. This setup allows the bannerHat to be used to fade the banners without encountering the IE text fading issues.
- (First time only) jQuery.Show() one of the banners, it doesn’t matter which one.
- After a period of time jQuery.fadeIn() the bannerHat div. This will hide the banner with a nice fading out effect.
- jQuery.Hide() the currently “visible” but hidden div.
- jQuery.Show() one of the other banners.
- jQuery.fadeOut() the bannerHat div. This will show the banner with a nice fading in effect.
- Wash, rinse, repeat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
So now there shouldn’t be any excuses for terrible fading in IE (yeah, I’m lookin at you Facebook…).