33岁转职者的前端笔记-DAY 16 使用 jQuery 写出动画效果

新增画面及移除画面

点击show时会呈现以下结果：

点击hide时会呈现以下结果(消失了)：

jQuery 程序码可以这样写：

<script>
    $('.btn-show').click(
      function () {
        $('.box').addClass('show');
      
    }
    )
    $('.btn-hide').click(
      function () {
        $('.box').removeClass('show');
      }
    )
    
 </script>
    

<script>
   $('.btn-show').click(
     function () {
       // $('.box').fadeIn();
       // $('.box').stop().slideDown();
       $('.box').stop().slideDown();
     }
   )

   $('.btn-hide').click(
     function () {
       // $('.box').fadeOut();
       $('.box').stop().slideUp();
     }
   )

   $('.btn-toggle').click(
     function () {
       $('.box').stop().fadeToggle();
       // $('.box').stop().slideToggle();
       // $('.box').stop().toggle();
     }
   )
   
 </script>