Slide effects do not work in IE
I have several <table> elements and I want to slideDown() and slideUp() on them so only one is visible at a time. It works as expected in all browsers except IE 6 and 7: tables show and hide properly but there isn't any animation.
A simple test case I wrote suggests that's related to tables not having assigned height:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript"><!--
function toggleTables(){
$("table").slideToggle();
}
//--></script>
</head>
<body>
<p><input type="button" class="button" onclick="toggleTables()" value="Toggle Tables"></p>
<table border>
<tr>
<td>I'm a table</td>
</tr>
</table>
<table border>
<tr>
<td>I'm a table too</td>
</tr>
</table>
<table border height="150">
<tr>
<td>I'm a table with height attribute</td>
</tr>
</table>
</body>
</html>
Am I correct?
Anyway, I've tried to add such attribute with JS but nothing I try seems to work:
-
$(function(){
$("table").each(function(){
var h = $(this).height();
$(this).attr("height", h);
$(this).css("height", h + "px");
$(this).height(h);
});
});
Can you give me some advice?