Make a table row fade in as its class changes?

Question

I have a button that is clicked to reveal a table row:

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

tr.deathzone td {
  display: none;
}

tr.deathzone.show td {
  display: table-cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>

That all works fine but I'm trying to fade in/out the rows, I've tried fadeIn("slow");but it's not working. I also tried adding transition:opacity 1.5s ease; to the css and that does not work either? Bit stuck!!

You can use the keyframes from this to make it work https://stackoverflow.com/a/9334132/2943218 — Carsten Løvbo Andersen, Dec 27 '21 at 13:09

Sayyid Omid Mousavi Mehr · Accepted Answer · 2021-12-27T13:45:26.653

1

Simply use .fadeIn("slow") while changing the display attribute of the "tr" to none and not its "td"s.

tr.deathzone {
 display: none;
}

2 examples:

https://jsfiddle.net/somidmm/03tn69kx/

function test() {$("#2").fadeToggle("slow");}

https://jsfiddle.net/somidmm/ad6bjh8c/

$(document).ready(function() {
 $("label.deathzone-toggle").click(function() {
  $("tr.deathzone").fadeToggle("slow");
  });
});

edited Dec 27 '21 at 13:45

answered Dec 27 '21 at 13:33

Sayyid Omid Mousavi Mehr

46
6

1

yes but as with the other answer when you toggle again the row stays there. – MarkL Dec 27 '21 at 13:39
using .fadeToggle() should work. – Sayyid Omid Mousavi Mehr Dec 27 '21 at 13:52
unfortunately not. – MarkL Dec 27 '21 at 14:06
1

Actually sorry, yes this does work! Thanks! – MarkL Dec 27 '21 at 14:22

score 0 · Answer 2 · answered Dec 27 '21 at 13:16

You can't transition the display property as you are hoping to do but you could instead transition the opacity which would give the same effect?!

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

tr.deathzone td {
  display: table-cell;
  opacity:0;
  background:white;
  transition:ease-in-out all 250ms;
}

tr.deathzone.show td {
  opacity:1;
  display: table-cell;
  background:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>

<table>
  <tr class='deathzone'>
    <td>.... some content</td>
  </tr>
</table>

I thought about that but If I did that the rows would still take up blank space on the page. — MarkL, Dec 27 '21 at 13:25
as I say, I don't think you can transition the display property so perhaps add `height:0` and transition that also — Professor Abronsius, Dec 27 '21 at 13:26

Junaid Shaikh · Answer 3 · 2021-12-27T13:43:32.447

0

instead of

tr.deathzone td {
  display: none;
}

tr.deathzone.show td {
  display: table-cell;
}

use

  tr.deathzone td {
      opacity: 0;
      visibility: hidden;
      height: 0;
      transition: opacity 0.5s ease;

    }
   tr.deathzone.show td{
      opacity: 1;
      visibility: visible;
      height: auto;
    }

and same jquery

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

edited Dec 27 '21 at 13:43

answered Dec 27 '21 at 13:31

Junaid Shaikh

1,045
4
19

Thanks but that doesn't work. – MarkL Dec 27 '21 at 13:40

Make a table row fade in as its class changes?

3 Answers3