Make a table row fade in as its class changes?-CodePudding

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  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!!

CodePudding user response：

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");
  });
});

CodePudding user response：

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  for="customSwitches">Show Deathzone Inducements</label>

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

CodePudding user response：

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");
  });
});