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中我们使用 animate()方法创建自定义的动画
// animate({params},speed,callback) 方法用于创建自定义动画;
// 必需的 params 参数定义形成动画的 CSS 属性;
// $('button').click(function(){
// $('p').animate({fontSize:'30px'},1500) //属性名称font-size 一律改成驼峰写法：fontSize
// })
// $('button').click(function(){
// $('p').animate({
// fontSize:'30px',
// opacity:'0.5',
// height:'260px'
// },1500)
// })
$('button').hover(function(){
$('p').animate({
fontSize:'30px',
opacity:'0.5',
height:'260px'
},1500)},
function(){
$('p').stop()
}
)
})
//停止动画：
//stop() 方法用于停止动画或效果，在它们完成之前,该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
</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>
