Help make animation disappear CSS, JS

Js code

<script> document.getElementById('hide0').onclick = function() { document.getElementById('JSt0').style.display = 'block'; document.getElementById('JSt1').style.display = 'none'; } document.getElementById('hide1').onclick = function() { document.getElementById('JSt0').style.display = 'none'; document.getElementById('JSt1').style.display = 'block'; } </script>

Long thought and came up with such a solution

  <script> $("#hide0").click(function(){ $("#JSt0").animate({height: "hide"}, 1000); $("#JSt1").animate({height: "show"}, 1000); }); $("#hide1").click(function(){ $("#JSt1").animate({height: "hide"}, 1000); $("#JSt0").animate({height: "show"}, 1000); }); </script>

If anyone has more options, please advise

    2 answers 2

    Regarding the solution you stopped at, which you indicated in the answer, firstly you will simply make the element transparent in this way, and not actually hide it from the page, secondly, jquery has ready-made functions for hiding / displaying fadeOut \ fadeIn . In the 3rd, if your second block should appear in place of the first, then your way of their animation will start to run simultaneously, which does not look very good. Therefore, it is better to do this:

     $("#hide0").click(function(){ $("#JSt0").fadeOut( 250, function() { $("#JSt1").fadeIn(250); }); }); $("#hide1").click(function(){ $("#JSt1").fadeOut( 250, function() { $("#JSt0").fadeIn(250); }); });

    Then one block will be hidden first, then another will appear in its place, which will not cause them to “intersect” the moment when they will both be visible during the animation.

      Thank you all very much! Stopped at this decision

        <script> $("#hide0").click(function(){ $("#JSt0").animate({opacity: "hide",}, 500); $("#JSt1").animate({opacity: "show"}, 500); }); $("#hide1").click(function(){ $("#JSt1").animate({opacity: "hide",}, 500); $("#JSt0").animate({opacity: "show"}, 500); }); </script>