On May 1, 11:57 am, Liming <lmxudot...@gmail.com> wrote:
> hello all,
>
> I'm here trying to simply expand a table cell's width to 88% while
> decrease it's siblings's width to 2% each.
>
> Below is the code
>
> $('#mytable td').click(function (event) {
>
> $(this).animate({
> 'width': '88%'
> }, 'slow')
> .siblings().css({
> 'width': '2%'
> })
> .end()
>
> });
>
> The problem is that in Firefox (3.x), it always extends a bit too
> much for the current cell clicked (as if it added another column or
> something).
>
> I see in firebug, while expanding to 88%, the style was temporarily
> changed to display:block and i figured that might be the issue.
>
> How do I overcome it?
>
> Greatly appreciate it.
Try restoring the display property right after:
$(this).animate({ width : '88%'}, 'slow').css('display', 'table-
cell');
But animations are made for block elements, you'll get weird glitches
most times when animating tables or other non-block elements.
