[jQuery] Re: BUG with animate method

Karl Swedberg Wed, 02 Apr 2008 08:14:18 -0700


Hi Erik,

I don't think you're going to be able to animate these properties atall with the core jQuery library alone.


Please take a look at the Color Plugin and see if that helps:

http://plugins.jquery.com/project/color


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Apr 2, 2008, at 10:25 AM, Erik H wrote:


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 amistake

on my part. When trying to animate a table cell from display: none to

display: table-cell, I get nothing. I created a callback functionthatconfirms the property was not set correctly. However, I am able toset

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 allyour

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>

[jQuery] Re: BUG with animate method

Reply via email to