<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.3jQuery效果-淡入淡出</title>
<!--
jQuery拥有四种fade方法:
fadeIn():淡入隐藏的元素
fadeOut():淡出可见元素
fadeToggle():淡入与淡出的切换
fadeTo():允许渐变为给定的不透明度（值介于0-1之间）
-->
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1. fadeOut()()
$('#btn1').click(function(){
$('#div1').fadeOut(1000);
$('#div2').fadeOut(2000);
});
//2. fadeIn()()
$('#btn2').click(function(){
$('#div1').fadeIn(1000);
$('#div2').fadeIn(2000);
});
//3. fadeToggle()
$('#btn3').click(function(){
$('#div1').fadeToggle('fast');
$('#div2').fadeToggle('slow',function(){alert("回调函数被执行。");});
});
//4. fadeTo()
$('#btn4').click(function(){
$('#div3').fadeTo('slow',0.45);
$('#div4').fadeTo(1000,0.2,function(){alert("回调函数被执行。");});
});
});
</script>
<style>
div{
width:100px;
height:100px;
background-color:#0CF;
border:solid 2px red;
margin:1px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="fadeOut()"><br>
<input type="button" id="btn2" value="fadeIn()"><br>
<input type="button" id="btn3" value="fadeToggle()"><br>
<input type="button" id="btn4" value="fadeTo()"><br>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
默认效果
单击“fadeOut()”按钮
单击“fadeTo()”按钮
