一、默认显示和隐藏方式
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 的元素，并为它绑定一个点击事件。当用户点击这个元素时，使用 toggle() 方法在显示和隐藏之间切换元素。在 toggle() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型切换元素，动画完成后执行回调函数。
二、滑动显示和隐藏方式
1、slideDown() 方法：可以通过向下展开的动画效果显示被选元素。它可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box" style="height: 0; overflow: hidden"></div>
<script>
$(document).ready(function() {
$('.box').slideDown(1000, function() {
console.log('动画完成');
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 slideDown() 方法将其通过向下展开的动画效果显示出来。由于初始样式中设置了 height: 0 和 overflow: hidden，因此一开始这个元素是隐藏的。在 slideDown() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素展开，动画完成后执行回调函数。
2、slideUp() 方法：可以通过向上收缩的动画效果隐藏被选元素。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box"></div>
<script>
$(document).ready(function() {
$('.box').slideUp(1000, function() {
console.log('动画完成');
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 slideUp() 方法将其通过向上收缩的动画效果隐藏起来。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。
3、slideToggle() 方法：可以在展示和隐藏之间切换被选元素，并且同样可以使用向上或向下的动画效果来实现平滑的过渡。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box" style="height: 0; overflow: hidden"></div>
<script>
$(document).ready(function() {
$('.box').click(function() {
$(this).slideToggle(1000, function() {
console.log('动画完成');
});
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并为它绑定一个点击事件。当用户点击这个元素时，使用 slideToggle() 方法在展示和隐藏之间切换元素的状态，并通过向上或向下的动画效果实现平滑的过渡。在 slideToggle() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型切换元素，动画完成后执行回调函数。
三、淡入淡出显示和隐藏方式
1、fadeIn() 方法：可以通过淡入的动画效果显示被选元素。它可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box" style="display: none"></div>
<script>
$(document).ready(function() {
$('.box').fadeIn(1000, function() {
console.log('动画完成');
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 fadeIn() 方法将其通过淡入的动画效果显示出来。由于初始样式中设置了 display: none，因此一开始这个元素是隐藏的。在 fadeIn() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素淡入，动画完成后执行回调函数。
2、fadeOut() 方法：可以通过淡出的动画效果隐藏被选元素。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box"></div>
<script>
$(document).ready(function() {
$('.box').fadeOut(1000, function() {
console.log('动画完成');
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并使用 fadeOut() 方法将其通过淡出的动画效果隐藏起来。在 fadeOut() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素淡出，动画完成后执行回调函数。
3、fadeToggle() 方法：可以在显示和隐藏之间切换被选元素，并且同样可以使用淡入或淡出的动画效果来实现平滑的过渡。它同样可以接受多个参数，其中第一个参数是动画的时长，第二个参数是动画的缓动类型，第三个参数是动画完成后的回调函数。
<div class="box" style="display: none"></div>
<script>
$(document).ready(function() {
$('.box').click(function() {
$(this).fadeToggle(1000, function() {
console.log('动画完成');
});
});
});
</script>上述代码表示：当文档加载完成后，通过 $ 函数选择类名为 box 的元素，并为它绑定一个点击事件。当用户点击这个元素时，使用 fadeToggle() 方法在显示和隐藏之间切换元素的状态，并通过淡入或淡出的动画效果实现平滑的过渡。在 fadeToggle() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型切换元素，动画完成后执行回调函数。
jQuery 效果函数
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队的函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| hide() | 隐藏被选的元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
原文地址:https://blog.csdn.net/qq_47128897/article/details/130844758
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_27338.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
