Question

If you try to do a .fadeIn() on a <tr> in jQuery, it adds (on Firefox and IE7) the element display:block;. (on IE7 also zoom:1).

I’m using the version 1.5 of jQuery. Is it a bug? And how can I fix this problem?

Answer 1

There isn’t much to work with in your question.

This example (using 1.5.2) shows that the display is table-cell after the .fadeIn().

code from example

$('tr')
    .hide()
    .delay(1000)
    .fadeIn( 1000, function(){alert($(this).css('display'));} );

BUT

If your CSS has something like this:

tr {
    display:none;
}

Then jQuery won’t know what to set the display as, and will just assume block.

Example: http://jsfiddle.net/AG34Z/1/

If that’s the case, then don’t set the tr to display:none, but instead give a class, and set the display on that.

.myrow {
    display:none;
}

Example: http://jsfiddle.net/AG34Z/3/

You can see that the .fadeIn() now sets the correct display on the row.