Put animation in the hide of a div

Question

Put animation in the hide of a div

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'd like to add animation for my div to disappear, I was looking at this topic Hide div when you click on it , but it did not resolve because my version of JQuery is more up-to-date.

Button:

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

jquery twitter-bootstrap

asked by anonymous 20.08.2018 / 18:58

2 answers

Apache - Permissions with Directory, provide access only by root (/) Problem with Data Reading in Firebase

score 0 · Answer 1

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>

score 0 · Answer 2

Use the toggle function of jquery. It switches 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 it working here: link