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>
