Demo : https://www.lenlop123.com/2020/09/16-stop-callback-queue-chaining-hoc.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<input id="btn_slideToggle" type="button" value="slideToggle">
<input id="btn_stop" type="button" value="stop">
<input id="btn_callback" type="button" value="callback">
<input id="btn_animate_queue" type="button" value="queue">
<input id="btn_chaining" type="button" value="chaining">
<br><br>

<div id="div_1" style="background-color: violet;width: 50px;height: 500px;"></div>

<script>
 
  // slideToggle
  $("#btn_slideToggle").click(function () {
    $("#div_1").slideToggle(5000);
  });

  // stop
  $("#btn_stop").click(function () {
    $("#div_1").stop(5000);
  });

  // callback
  $("#btn_callback").click(function () {
    $("#div_1").slideToggle(1000, function () {
      alert("Hàm slideUp đã chạy xong");
    });
  });


   // queue
   $("#btn_animate_queue").click(function () {
    var div = $("#div_1");
    div.animate({ height: '300px', opacity: '0.4' }, "slow");
    div.animate({ width: '300px', opacity: '0.8' }, "slow");
    div.animate({ height: '100px', opacity: '0.4' }, "slow");
    div.animate({ width: '100px', opacity: '0.8' }, "slow");
  });

  // chaining
  $("#btn_chaining").click(function () {
    $("#div_1").slideUp(2000).slideDown(2000);
  });
</script>