How to make this jQuery snippet work in Internet Explorer?

Posted by George Edison on Stack Overflow See other posts from Stack Overflow or by George Edison
Published on 2010-04-21T21:55:08Z Indexed on 2010/04/21 22:13 UTC
Read the original article Hit count: 163

If there was ever a time to hate IE, this is it. This code begins with a box with content. When the button is clicked, the box is supposed to drop down and fade-in.

<html>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>

function Test()
{
  var item_height = $('#test').height();
  $('#test').height(0);
  $('#test').css('opacity','0');

  $('#test').animate({ height: item_height, opacity: '1' },400);
}

</script>
<body>
<!-- The div below holds the sample content -->
<div id="test" style='border: 1px solid black;'>
  Content<br>
  Content<br>
  Content<br>
  Content<br>
  Content
</div>
<!-- The button to test the animation -->
<br><br>
<div style='position: absolute; top: 150px; left: 10px;'>
  <button onclick='Test();'>Test</button>
</div>
</body>
</html>

This very simple example works on Chrome, Safari, and Opera. But Internet Explorer? No.

How can I (if it's even possible) fix this so that it works in IE?

© Stack Overflow or respective owner

Related posts about internet-explorer

Related posts about dropdown-menu