[jQuery] Re: why is animation on is messing up layout in firefox?

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.