HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue false vs queued</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 32rem; }
    div.box {
      background-color: #bca;
      width: 200px;
      height: 1.1em;
      text-align: center;
      border: 2px solid green;
      margin: 8px 0;
      font-size: 14px;
    }
    button { margin: 4px 8px 4px 0; padding: 8px 12px; font-size: 14px; }
  </style>
</head>
<body>
  <button type="button" id="go1">Animate Block1 (parallel)</button>
  <button type="button" id="go2">Animate Block2 (serial)</button>
  <button type="button" id="reset">Reset</button>
  <div class="box" id="block1">Block1</div>
  <div class="box" id="block2">Block2</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#go1").on("click", function () {
      $("#block1")
        .animate({ width: "90%" }, { queue: false, duration: 3000 })
        .animate({ fontSize: "24px" }, 1500)
        .animate({ borderRightWidth: "15px" }, 1500);
    });
    $("#go2").on("click", function () {
      $("#block2")
        .animate({ width: "90%" }, 1000)
        .animate({ fontSize: "24px" }, 1000)
        .animate({ borderLeftWidth: "15px" }, 1000);
    });
    $("#reset").on("click", function () {
      $("div.box").css({ width: "", fontSize: "", borderWidth: "" });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .animate() — queue:false vs queued (Try It)