当前位置：首页 > jquery

jquery淡入淡出

2026-04-08 09:03:06jquery

jQuery淡入淡出效果实现

jQuery提供了简单的方法来实现元素的淡入淡出动画效果，主要通过fadeIn()、fadeOut()和fadeToggle()等方法实现。

fadeIn()方法

fadeIn()用于将隐藏的元素逐渐显示出来（淡入效果）。语法如下：

$(selector).fadeIn(speed, callback);

speed：可选参数，指定动画时长（"slow"、"fast"或毫秒数）。
callback：可选参数，动画完成后执行的回调函数。

示例代码：

$("#btnFadeIn").click(function(){
    $("#target").fadeIn(1000); // 1秒淡入
});

fadeOut()方法

fadeOut()用于将可见元素逐渐隐藏（淡出效果）。语法与fadeIn()一致：

jquery淡入淡出

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

示例代码：

$("#btnFadeOut").click(function(){
    $("#target").fadeOut("slow"); // 慢速淡出
});

fadeToggle()方法

fadeToggle()在淡入和淡出之间切换，根据当前状态自动选择：

jquery淡入淡出

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

示例代码：

$("#btnToggle").click(function(){
    $("#target").fadeToggle(500); // 0.5秒切换
});

fadeTo()方法

fadeTo()允许调整到指定的透明度（0-1之间）：

$(selector).fadeTo(speed, opacity, callback);

示例代码：

$("#btnFadeTo").click(function(){
    $("#target").fadeTo(2000, 0.5); // 2秒淡至半透明
});

注意事项

确保目标元素初始状态正确（淡入需先隐藏，淡出需先显示）。
可通过CSS设置display: none初始化隐藏元素。
回调函数常用于动画结束后执行其他操作，如移除元素：
```
$("#target").fadeOut(1000, function(){
  $(this).remove();
});
```

综合示例

<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<div id="box" style="width:100px;height:100px;background:red;display:none;"></div>

<script>
$("#fadeInBtn").click(function(){
    $("#box").fadeIn();
});
$("#fadeOutBtn").click(function(){
    $("#box").fadeOut();
});
</script>

标签: jquery