2

Estoy realizando un menú que al hacer click en un botón, dicho botón se debería ocultar, ya realice la animación pero quiero añadirle el método .hide() para que lo oculte.

Lo primero que intente fue lo siguiente:

$("#boton").click(function() {
    $("#navbar").animate({
        left: '-100%',
        opacity: '0.5',
    }, 1500);
});

Luego al intentar añadirle el metodo .hide():

$("#boton").click(function() {
        $("#navbar").hide().animate({
            left: '-100%',
            opacity: '0.5',
        }, 1500);
    });

Pero al realizar lo siguiente, lo oculta y no realiza la animación.

  • HTML:
<div class="container">

      <div class="row">

        <nav class="col-3" id="navbar">
            <ul>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
            </ul>
        </nav>

        <main class="col">

            <nav class="navbar navbar-dark bg-dark">

              <button class="navbar-toggler" type="button" id="boton">
                  <span class="navbar-toggler-icon"></span>
              </button>

            </nav>

          </main>

      </div>

    </div>
2
  • Hola, ¿quieres que la animación oculte el botón? si usas $("#navbar") lo estas aplicando al <nav>, si quieres aplicarlo al botón deberías usar $(this). el 26 sep. 2019 a las 19:15
  • Hola @the-breaker lo que busco es que al dar click al botón, se oculte el elemento que tiene el id navbar pero realizando la animación que puse en el ejemplo, ya ocultarlo lo hace, el problema es que no realiza la animación el 26 sep. 2019 a las 19:18

1 respuesta 1

1

puedes usar setTimeout para darle tiempo a la animación de acabar antes de que se oculte

$("#boton").click(function() {
    $("#navbar").animate({
        left: '-100%',
        opacity: '0',
    }, 2000);
    setTimeout(function(){
        $("#navbar").hide();
    }, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">

      <div class="row">

        <nav class="col-3" id="navbar">
            <ul>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
              <li>
                Ejemplo
              </li>
            </ul>
        </nav>

        <main class="col">

            <nav class="navbar navbar-dark bg-dark">

              <button class="navbar-toggler" type="button" id="boton">
                  Boton <span class="navbar-toggler-icon"></span>
              </button>

            </nav>

          </main>

      </div>

    </div>

2
  • El elemento se oculta muy rápido, debes darle mas tiempo. el 26 sep. 2019 a las 19:28
  • así esta mejor. el 26 sep. 2019 a las 19:31

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.