通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
这里还是强烈推荐使用fadeToggle()方法,可以实现切换。与弹出的
方法一样,其也有参数。
$(selector).fadeToggle(speed,callback);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1600);
})
})
</script>
</head>
<body>
<button>begin</button>
<br>
<div id="div1" style="width: 80px;height: 80px;background-color: red">
</div>
<br>
<div id="div2" style="width: 80px;height: 80px;background-color: red">
</div>
<br>
<div id="div3a" style="width: 80px;height: 80px;background-color: red">
</div>
</body>
</html>
fadeTo()方法:允许渐变为给定的不透明度(值介于0到1)
0表示透明,1表示不透明。
$(selector).fadeTo(speed,opacity,callback);