jQuery 的渐隐渐显动画 ( 参考一下13即可 )
通过操作 元素的 opacity 达到效果
opacity 是Css的透明度属性啊
1. faseIn() //显示到指定透明度
+ opacity 0 ~ 1
2. fadeOut() //隐藏到指定透明度
+ opacity 1 ~ 0
3. fadeToggle() //切换
+ 切换
上面的语法都如下：
方法.(时间, 运动曲线, 回调函数)
4. fadeTo()
+ 运动到指定透明度
+ 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)
值得注意的是 fadeTo这个方法指定透明度后 他无论是 显/隐 还是 切换 以后都是透明度x 的了，因为呢 我也不知道.
例： ....自己试试即可：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jqsourse.js"></script>
<style>
*{
margin:0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
input{
margin-top: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<input class="toggle" type="button" value="切换">
<input class="fadeTo" type="button" value="切换到指定透明度">
<div></div>
<script>
$('.show').click(()=>{
$('div').fadeIn(1000,'linear',()=>{
console.log("显示div");
})
});
$('.hide').click(()=>{
$('div').fadeOut(1000,'linear',()=>{
console.log("隐藏div");
})
});
$('.toggle').click(()=>{
$('div').fadeToggle(1000,'linear',()=>{
console.log("切换div");
})
});
$('.fadeTo').click(()=>{
$('div').fadeTo(1000,0.5,'linear',()=>{
console.log("切换到指定透明度");
})
});
</script>
</body>
</html>
作者：咸瑜
