Thanks Ricardo.. just tried, didn't work out too well. Layout is all
messed up cuz during animation, display:'block" already messed it up.
Setting the right value back didn't appear to have any effect. IE 7
works fine though. Strange.
On May 1, 1:38 pm, Ricardo <ricardob...@gmail.com> wrote:
> 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.
