I noticed one thing that may have caused an error. The animate method requires hyphenated property names (margin-left, table-cell) to be rewritten in camelCase ( marginLeft, tableCell). However, these changes didn't make a difference. I've updated the code in the example to reflect the proper implementation. The test can be seen here. Any ideas on this would be greatly appreciated.
http://affinitycreativeteam.com/erik/test-plan.php On Apr 1, 1:17 pm, Erik H <[EMAIL PROTECTED]> wrote: > 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>
