This 1 will work for u:- WORKING DEMO
$('#toggle').click(function () {
$('tr.cat1 td').fadeToggle();
});
Вопрос
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.
<a href="#" id="toggle">Toggle</a>
<table class="">
<tr class="cat1">
<td>data1</td><td>data2</td>
</tr>
</table>
body {background-color: #ccc}
table {border-collapse: collapse; background-color: #fff}
td {border: 1px solid black; padding: 10px;}
tr.cat1 {background-color: #ddd;}
$(document).ready(function() {
$('#toggle').click(function () {
$('tr.cat1').fadeToggle('fast');
});
});
Things I've figured out:
border-collapse: collapse
then the problem goes awayhide
then show
works fineSo is it possible to get fadeToggle
to work correctly in Firefox?
Решение
This 1 will work for u:- WORKING DEMO
$('#toggle').click(function () {
$('tr.cat1 td').fadeToggle();
});