09-jQuery-动画-显示和隐藏元素

一、默认显示和隐藏方式

1、show()方法：可以显示被选元素，并且可以使用动画效果来实现平滑的过渡。它可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。

<div class="box" style="display: none"></div>

<script>
  $(document).ready(function() {
    $('.box').show(1000, function() {
      console.log('动画完成');
    });
  });
</script>

上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 show() 方法将其显示出来。由于初始样式中设置了 display: none，因此一开始这个元素是隐藏的。在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。

2、hide() 方法：可以隐藏被选元素，并且可以使用动画效果来实现平滑的过渡。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。

<div class="box"></div>

<script>
  $(document).ready(function() {
    $('.box').hide(1000, function() {
      console.log('动画完成');
    });
  });
</script>

上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 hide() 方法将其隐藏起来。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。

3、toggle() 方法：可以在显示和隐藏之间切换被选元素，并且同样可以使用动画效果来实现平滑的过渡。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。

<div class="box" style="display: none"></div>

<script>
  $(document).ready(function() {
    $('.box').click(function() {
      $(this).toggle(1000, function() {
        console.log('动画完成');
      });
    });
  });
</script>

上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素&