一、默认显示和隐藏方式
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 的元素&
