点亮灯案例
想要实现开灯效果，应该怎么办呢？
那就要用到fadeTo() 方法
fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
div {
width: 100px;
height: 200px;
border: 1px solid #000;
}
div img {
width: 100px;
height: 200px;
}
div img:first-child {
display: none;
}
</style>
</head>
<body>
<h1>点亮灯实例</h1>
<hr>
<input type="button" value="开灯">
<div>
<img src="image/on.png" alt="">
<img src="image/off.png" alt="">
</div>
<script>
$(function() {
$('input').click(function() {
$('img:last').fadeOut('fast', function() {
$('img:first').fadeIn('slow', function() {
$('input').val('灯亮了');
})
})
$('div').fadeTo('1200', 0.6);
})
})
</script>
</body>
</html>
运行结果:
点击开灯后:
灯亮了!!!
案例所使用图片:
