I’ve come across two issues on Internet Explorer 7 while developing a website containing some slideDown() effects, and found some quick fixes for them. :)

Issue 1: slideDown() does not actually slide, the target HTML element appears the same way as show().

After messing around with the JavaScript and HTML, I’ve finally nailed down the issue. It occurs when there are absolutely positioned elements in the target HTML.

Typically when we have absolutely positioned elements, we would want to have a relatively positioned wrapper element to control the position of the elements on the page. It makes perfect sense to simply trigger the slideDown() effect on the wrapper.

The HTML schema would look something like this:

Wrapper A (the element that contains Wrapper B, it makes an AJAX call to retrieve Wrapper B)
…. Wrapper B (the relatively positioned target element that is assigned to the slideDown() event)
…. …. Element C (absolutely positioned)

Both Firefox and Safari don’t have any problems with that, but Internet Explorer does. On IE 7 (I haven’t tested IE 6), the targeted HTML (Wrapper B) will simply appear without the sliding effect, resulting the same effect as calling show().

The fix is simple, make the parent element (Wrapper A) relatively positioned too.

Issue 2: slideDown() animates, then the element vanishes immediately afterwards.

The problematic JavaScript looks something like this:

var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown();

The fix is quick and simple:

var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown().show(function(){
	$(this).html(data).show();
});

Of course, depending on the HTML markup, your mileage may vary.

Related posts

• jQuery problems in IE? It could be SWFObjects. (3)
• Release: [jQuery Plugin] Slideshow Lite (49)
• Release: [jQuery Plugin] Endless Scroll (36)
• jQuery Slideshow Lite Plugin Updated (Major Rewrite) (0)
• jQuery Endless Scroll Updated (0)