jQuery淡入\淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery动画效果</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 淡入淡出:
// jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果;
//fadeIn(speed,callback)用于淡入已隐藏的元素;
// $('.one').hide()
// $('.btu').click(function(){
// $('.one').fadeIn(3000)
// })
//fadeOut(speed,callback)用于淡出可见元素;
// $('.btu').click(function(){
// $('.one').fadeOut(3000)
// })
//fadeTo(speed opacity callback) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
//opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
$('.btu').click(function(){
$('.one').fadeTo(3000,0.7)
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.box{margin:20px auto;font-size:20px;color: #fff;width: 300px;}
.box p{height: 160px;width: 300px;background: #9EEA6A;text-align: center;line-height: 160px;position: relative;}
.box button{height: 40px;width: 300px;border:none;color: #fff;background: #437421;}
</style>
</head>
<body>
<div class="box">
<button class="btu">点击</button>
<p class="one">~ 我是p标签 ~</p>
</div>
</body>
</html>
