Place animation in the Hide of a div

Question

I’d like to add animation to my vanish div, I was looking at this topic Hide div when you click it, only that it did not solve because my version of Jquery is more updated.

Knob:

<button type="submit"  class="btn btn-success" onclick="Mudarestado('oculto')">Importar</button>  

Code:

<script>
            $('#aviso').on("click", function () {
                $(this).hide("slow");
            });
            function Mudarestado(el) {
            var display = document.getElementById(el).style.display;
            if (display == "none")
              document.getElementById(el).style.display = 'block';
            else
              document.getElementById(el).style.display = 'none';
          }
</script>

Answer 1

Use the function toggle jquery.
She alternates between hide and show the referenced element.

   <button type="button"  class="btn btn-success" id="botao-acao">Esconder/Mostrar DIV</button>  

   <script>
      $('#botao-acao').on("click",function(){
         $("#div").toggle("slow");
      });
   </script>

    <div style="width:300px;height:300px;background-color:red" id="div">
       DIV QUE SOFRERÁ AÇÃO
    </div>

See working here: https://jsfiddle.net/wLzebfqu/

Answer 2

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

<p>CLIQUE AQUI </p>

<button onclick="myFunction()">SOME OU APARECE</button>

<div id="myDIV">
MINHA DIV 
</div>

<p><b>Note:</b> ESSE ELEMENTO FICA FIXO </p>