Penerapan jQuery Effect

<!DOCTYPE html>
<html>
<head>
    <title>Penerapan jQuery Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #2DAAE1;
            margin-top: 20px;
            padding: 20px;
        }

        .box button {
            margin-bottom: 10px;
        }

        .box-1 {
    background:#98bf21;
    height:100px;
    width:100px;

    position:relative;
    top: 50px;
    margin:6px;
}
    </style>
    <div class="box">
    </div><br>
    <button id="hideBtn">Hide</button>
    <button id="showBtn">Show</button>
    <button id="fadeInBtn">Fade In</button>
    <button id="fadeOutBtn">Fade Out</button>
    <button id="slideUpBtn">Slide Up</button>
    <button id="slideDownBtn">Slide Down</button>
    <button id="toggleBtn">Toggle</button>
    <button id="animateBtn">Animasi</button>

    <button>Animate!</button>
    <div class="box-1"></div>
    <script>
     $(document).ready(function(){
    // Hide Effect
    $("#hideBtn").click(function(){
      $(".box").hide(1000);
    });

    // Show Effect
    $("#showBtn").click(function(){
      $(".box").show(1000);
    });

    // Fade In Effect
    $("#fadeInBtn").click(function(){
      $(".box").fadeIn(1000);
    });

    // Fade Out Effect
    $("#fadeOutBtn").click(function(){
      $(".box").fadeOut(1000);
    });

    // Slide Up Effect
    $("#slideUpBtn").click(function(){
      $(".box").slideUp(1000);
    });

    // Slide Down Effect
    $("#slideDownBtn").click(function(){
      $(".box").slideDown(1000);
    });

    // Toggle Effect
    $("#toggleBtn").click(function(){
      $(".box").toggle(1000);
    });

    // Animate Effect
    $("#animateBtn").click(function(){
      $(".box").animate({left: '200px', opacity: '0.5', height: '+=150px', width: '+=150px'}, 1000);
    });


  $('button').click(function() {
    $('.box-1').animate({
        'top': 0,
    }, 500, 'linear');
});
  });
   </script>
</body>
</html>