1

Amigos, esta es mi primera pregunta. Estoy haciendo un ejercicio en el cual necesito agrandar y achicar un elemento usando Jquery. Mi profesor sugirió usar una variable booleana para usar el mismo boton para achicar y agrandar. Traté de desarrollar la animación y en los dos primeros click, lo logro y luego se agranda y se achica sola. Espero puedan ayudarme. Saludos

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejercicio 1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </head>

  <body>
    <div>
      <div>
        <div id="boton" class="btn" style="background-color: red; border: 1px solid gray; margin: 10px; padding: 10px">
          <span>haz click!!!</span>
        </div>
        <div id="cambio" style="background-color: white; border: 1px solid gray; margin: 10px; padding: 10px">
          <span>Cambiame</span>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 1. Al hacer click sobre la caja que dice "haz click", aumenta el tamaño y el color de la
    // caja que dice "cambiame" (sólo utiliza jQuery). Siente la libertad de agregar las
    // clases o ids que sean necesarios (no modificar estructura html entregada).
var primer = true;
$(document).ready(function () {
      $("#boton").on("click", function () {
      $("#boton > span").css("color", "white");
      $("#cambio").css("background", "blue").css("color", "white");
          if (primer) {
                  $("#cambio").animate({
                    height: "200px",
                  });
          }
          primer = false
          if (!primer){
            $("#boton").on("click", function () {
              primer = true
                  $("#cambio").animate({
                        height: "10px",
                  });
            });
          }
    });
});

  </script>
</html>
1
  • Muchas gracias amigo. Esta respuesta me sirve, y pude entender como usar la variable booleana. Commented el 23 jun. 2021 a las 23:30

1 respuesta 1

1

Tienes dos problemas, que son los que te están provocando ese comportamiento indeseado.

  1. Las condiciones están mal montadas. Si primer es true, después de entrar por él, se cambia a false y también entra por el false. Cosa que no te interesa, lo interesante es que entre por una o por la otra, nunca por ambas.

  2. En el false vuelves a vincular un evento click al botón. Por lo que en el mismo momento en que entras por false tu botón lanza ambas animaciones, tanto la de abrirse, como la de cerrarse cada vez que lo pulsas.

Mi solución pasa por construir un if() y un else() para que nunca se puedan cumplir las dos condiciones y también por quitar el segundo evento click. No parece necesario.

$(function () {
  var primer = true;

  $("#boton").on("click", function () {
      $("#boton > span").css("color", "white");
      $("#cambio").css("background", "blue").css("color", "white");
      
      if (primer) {
        $("#cambio").animate({
          height: "200px",
        });
        primer = false
      }
      else {
        $("#cambio").animate({
          height: "10px",
        });
        primer = true
      }
    });
});
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejercicio 1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </head>

  <body>
    <div>
      <div>
        <div id="boton" class="btn" style="background-color: red; border: 1px solid gray; margin: 10px; padding: 10px">
          <span>haz click!!!</span>
        </div>
        <div id="cambio" style="background-color: white; border: 1px solid gray; margin: 10px; padding: 10px">
          <span>Cambiame</span>
        </div>
      </div>
    </div>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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