Como fazer esse fragmento de jQuery funcionar no Internet Explorer?

Question

Apr 21, 2010, 11:55 PM

Como fazer esse fragmento de jQuery funcionar no Internet Explorer?

Se houve um tempo para odiar o IE, é isso. Este código começa com uma caixa com conteúdo. Quando o botão é clicado, a caixa deve aparecer e desaparecer.

<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>

Este exemplo muito simples funciona no Chrome, Safari e Opera. Mas o Internet Explorer?Não.

Como posso (se possível) corrigir isso para que ele funcione no IE?