jQuery fadeToggle makes row background color disappear

Question

This is a Firefox only problem. This works fine on Chrome and Internet Explorer.

If you have a background-color on a table row, then hide the row using fadeToggle and then show it again, the background-color for the padding goes back to the default.

I have it trapped down to this JSFiddle, that just has one link doing a fadeToggle of a single row.

Before toggle

After toggle

HTML

<a href="#" id="toggle">Toggle</a>
<table class="">
    <tr class="cat1">
        <td>data1</td><td>data2</td>
    </tr>
</table>

CSS

body {background-color: #ccc}
table {border-collapse: collapse; background-color: #fff}
td {border: 1px solid black; padding: 10px;}
tr.cat1 {background-color: #ddd;}

jQuery

$(document).ready(function() {
    $('#toggle').click(function () { 
        $('tr.cat1').fadeToggle('fast');
    });
});

Things I've figured out:

• If you switch tab and then switch back then the background-color fixes itself
• If you remove border-collapse: collapse then the problem goes away
• jQuery hide then show works fine

So is it possible to get fadeToggle to work correctly in Firefox?

Answer 1

This 1 will work for u:- WORKING DEMO

$('#toggle').click(function () {
      $('tr.cat1 td').fadeToggle();
});