[jQuery] BUG with animate method
Hi everyone,
I've come across a little annoying issue that I hope is just a mistake
on my part. When trying to animate a table cell from display: none to
display: table-cell, I get nothing. I created a callback function that
confirms the property was not set correctly. However, I am able to set
other properties ( e.g. border).
You can see a simple demo here. http://affinitycreativeteam.com/erik/test-plan.php
Any help confirming or rejecting would be greatly appreciated.
Here's all of the code.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { font: 12px/normal Arial, Helvetica, sans-serif; }
th { background: #e1e1e1; text-align: left; border: 1px solid #ccc; }
th, td { padding: 5px 0 5px 10px ; font-weight: bold; border: 1px
solid #ccc; }
td { width: 90px; vertical-align: top; }
table { border-collapse: collapse; }
td.feature, th.feature { width: 200px; }
td.title { padding-left: 24px; background: url(images/plus.gif) 12px
center no-repeat; }
.description { display: none; font-weight: normal; font-size: 12px;
padding: 10px 12px;}
</style>
<script src="js/jquery-1.2.3.min.js"></script>
<script>
$().ready(function()
{
// if expandable, change mouse cursor
$('.title').bind('mouseover', function()
{
$(this).css('cursor', 'pointer');
});
// add hide/show functionality
$('.title').bind('click', function()
{
if ($(this).parent().next().children('.description').css('display')
== 'none')
{
$(this).parent().next().children('.description').animate({ display:
'table-cell', border: '1px solid red' }, 0, function()
{ alert( 'display is set to: ' + $('.description').css('display') + '
and border is set to: ' + $('.description').css('border') )});
$(this).css('background', 'url(images/minus.gif) 12px center no-
repeat');
}
else
{
$(this).parent().next().children('.description').css('display',
'none');
$(this).css('background', 'url(images/plus.gif) 12px center no-
repeat');
}
});
});
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title">Disk Space</td>
<td>100 GB</td>
<td>150 GB</td>
<td>250 GB</td>
<td>300 GB</td>
</tr>
<tr>
<td colspan="5" class="description">Go ahead and store all your
Web site files including images, audio and video files. Each of our
plans provides plenty of space ranging from 100 GB to 300 GB.</td>
</tr>
</table>
</body>
</html>