菜鸟教程
教程 jquery tutorial

淡入淡出

淡入淡出是 jQuery 中常用的视觉动画方式，用于实现元素的透明渐变效果，提升用户界面表现力。

常用淡入淡出方法

fadeIn([speed, callback])

使隐藏元素逐渐显示出来。

js 
$("#box").fadeIn(1000);

fadeOut([speed, callback])

使可见元素逐渐隐藏。

js 
$("#box").fadeOut(1000);

fadeToggle([speed, callback])

根据当前状态切换淡入淡出。

js 
$("#box").fadeToggle();

fadeTo(speed, opacity, callback)

将元素透明度渐变至指定值。

js 
$("#box").fadeTo(1000, 0.3); // 1秒变为30%透明

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnIn").click(function () {
      $("#box").fadeIn();
    });
    $("#btnOut").click(function () {
      $("#box").fadeOut();
    });
    $("#btnToggle").click(function () {
      $("#box").fadeToggle();
    });
    $("#btnTo").click(function () {
      $("#box").fadeTo(800, 0.5);
    });
  });
</script>

<div
id="box"
style="
width: 200px;
height: 100px;
background: #2196f3;
display: none;
margin-bottom: 10px;
"
></div>


<button id="btnIn">淡入</button>
<button id="btnOut">淡出</button>
<button id="btnToggle">切换</button>
<button id="btnTo">变为半透明</button>

相关内容