主页/jQuery教程/动画与特效/jQuery淡入淡出效果

jQuery教程

jQuery淡入淡出效果

2,910字
12–18 分钟

jQuery的淡入淡出效果是其提供的一组强大且易于使用的动画特效，主要用于控制元素的不透明度，从而实现平滑的显示和隐藏效果。这些效果不仅可以增强用户界面的交互性，还能为网页增添专业感。掌握这些基础的淡入淡出方法，是学习更复杂jQuery动画效果的基石。

目录

核心方法概览

jQuery提供了四个核心的淡入淡出方法，它们分别是：

  • fadeIn() ：使元素从完全透明（隐藏）逐渐变为完全不透明（显示）。
  • fadeOut() ：使元素从完全不透明（显示）逐渐变为完全透明（隐藏）。
  • fadeToggle() ：在 fadeIn() 和 fadeOut() 两种状态之间切换。
  • fadeTo() ：将元素的不透明度平滑地改变到指定的数值。

fadeIn() – 淡入效果

fadeIn() 方法用于让被选中的元素以淡入的方式显示出来。如果该元素初始时是隐藏的（例如通过CSS的display:none;），这个方法会使其重新显示并伴随渐变效果。

语法

$(selector).fadeIn(speed, easing, callback);
  • speed (可选)：动画执行的速度。可以是预设的字符串 “slow”、”normal” 或 “fast”，也可以是表示毫秒数的整数。
  • easing (可选)：用于指定过渡效果的类型。jQuery默认只支持 “swing”（先慢后快）和 “linear”（匀速）。其他缓动效果需要引入额外的插件。
  • callback (可选)：动画完成后要执行的函数。

示例

下面是一个简单的例子，点击按钮后，一个原本隐藏的div元素会以淡入的方式显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
jQuery fadeIn() 示例
<style type="text/css">
#targetDiv {
display: none; /* 初始状态为隐藏 */
width: 200px;
height: 100px;
background-color: lightblue;
padding: 10px;
}
</style>
</script>
</head>
<body>
显示 div
这是一个将要淡入的 div 元素。

<script>
$(document).ready(function(){
$("#showBtn").click(function(){
$("#targetDiv").fadeIn(1000); // 1秒的淡入效果
});
});
</script>
</body>
</html>

fadeOut() – 淡出效果

与 fadeIn() 相反， fadeOut() 方法用于让元素以淡出的方式消失。它会将元素的不透明度从1逐渐变为0，最终使元素变得完全透明。

语法

$(selector).fadeOut(speed, easing, callback);

其参数与 fadeIn() 方法完全相同。

示例

这个例子展示了如何使用 fadeOut() 方法。点击按钮后，一个可见的段落元素会以淡出的方式隐藏起来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
jQuery fadeOut() 示例
</script>
</head>
<body>
隐藏段落
这是一段将要淡出的文字。

<script>
$(document).ready(function(){
$("#hideBtn").click(function(){
$("#targetPara").fadeOut("slow"); // 使用预设的慢速淡出
});
});
</script>
</body>
</html>

fadeToggle() – 切换淡入淡出

fadeToggle() 方法是 fadeIn() 和 fadeOut() 的结合体。它会检查目标元素当前的状态，如果元素是隐藏的，就执行淡入操作；如果是显示的，则执行淡出操作。这非常适合用于创建“展开/收起”等切换效果。

语法

$(selector).fadeToggle(speed, easing, callback);

同样，其参数与前两个方法保持一致。

示例

这个示例中的按钮可以切换一个面板的显示和隐藏状态，每次点击都会产生不同的淡入或淡出效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
jQuery fadeToggle() 示例
<style type="text/css">
#togglePanel {
display: none;
width: 300px;
height: 150px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 15px;
}
</style>
</script>
</head>
<body>
切换面板显示状态
这是一个可以通过按钮切换显示/隐藏的面板。

<script>
$(document).ready(function(){
$("#toggleBtn").click(function(){
$("#togglePanel").fadeToggle(500); // 0.5秒的切换效果
});
});
</script>
</body>
</html>

fadeTo() – 自定义不透明度

fadeTo() 方法允许您将元素的不透明度精确地调整到一个指定的值，而不仅仅是在显示和隐藏（不透明度1和0）之间切换。

语法

$(selector).fadeTo(duration, opacity, easing, callback);
  • duration ：必选。动画执行的时间，可以是预设的字符串或表示毫秒的整数。
  • opacity ：必选。目标不透明度，范围从0（完全透明）到1（完全不透明）。
  • easing 和 callback ：可选参数，用法与之前相同。

示例

这个例子演示了如何将一个图片的不透明度在点击按钮后调整为0.3。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
jQuery fadeTo() 示例
</script>
</head>
<body>
调整图片不透明度
<script>
$(document).ready(function(){
$("#adjustBtn").click(function(){
$("#targetImg").fadeTo(800, 0.3); // 在0.8秒内将不透明度调整为0.3
});
});
</script>
</body>
</html>

总结

jQuery的淡入淡出效果系列方法为网页开发人员提供了一种简洁高效的方式来创建平滑的元素显示和隐藏动画。通过 fadeIn() 、 fadeOut() 、 fadeToggle() 和 fadeTo() 这四个核心方法，可以轻松实现各种动态交互效果，极大地提升了用户体验。

方法描述
fadeIn()通过增加不透明度，使元素从隐藏状态淡入显示。
fadeOut()通过减少不透明度，使元素从显示状态淡出隐藏。
fadeToggle()在 fadeIn() 和 fadeOut() 效果之间自动切换。
fadeTo()将元素的不透明度平滑地改变到指定的数值。

最新发布