Internet Explorer does NOT respect jQuery's slideDown effect

Question

I Use internet explorer and last version of jquery. effetcs like slidedown, fadein, fadeout dont work with ie but works good with Google Chrome. How to fix it?

Code runs fine in Google Chrome:

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#form1").hide();
jQuery("#form1").fadeIn(6000, function() {
    // Animation complete.form1:mainHome:panelGroup2
});
});

Answer 1

I would open Fiddler or FireBug and make sure your script assets are loading. I can say that I know these are compatible with IE as I test it daily with projects.

Answer 2

This is often the result of re-used IDs, which is invalid HTML, for example try a demo of your code against this:

<form id="form1">Test Content #1</form>

This works in all browsers, you can see it here.

However if you repeat the IDs you start getting side-effects that vary per-browser, for example:

<form id="form1">Test Content #1</form>
<form id="form1">Test Content #2</form>

You can see a demo here, only the first one fades with IE, other browsers will vary a bit (also depending on their version). Because IDs are (by HTML spec) required to be unique, the browser guys are free to make this assumption in their code...this usually means a single entry in a hash table to tie and ID to an element (this is also why ID lookups are so fast). Once you violate this rule, sometimes predictable, sometimes very odd side-effects will happen.

As a general rule, if you're experiencing any cross-browser issues on something you think should work, make sure your HTML is valid. You can use the W3C Validator to check your markup here: http://validator.w3.org/