摘要： 通过jQuery动画学习后，更加巩固了之前学习的JQuery的基础知识，jQuery小案例如下所示：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery自定义动画</title> &
通过jQuery动画学习后，更加巩固了之前学习的JQuery的基础知识，jQuery小案例如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery自定义动画</title>
<link rel="stylesheet" type="text/css" href="../css/css.css">
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
/*Css内部样式写入*/
div {width: 700px;height: 600px; margin: 15px auto;text-align: center;background: #ccc;line-height: 600px;
position: relative;}
.bt{margin-left: 560px;width: 200px;height: 80px;background: pink;}
</style>
</head>
<body>
<!-- 自定义函数（animate）
语法：$(select).animate({params},speed,fn)
必须的Params：参数定义形成的动画，CSS属性
speed：动画持续的时长，可以用英文，slow fast或者毫秒
fn：动画完成后执行的函数 -->
<!-- 页面布局： -->
<div>
<p>自己第一个自定义的小动画</p>
</div>
<input type="button" value="点击动画开始">
<script type="text/javascript">
$(document).ready(function(){
$('input').addClass('bt');
//自定义动画，animate点击按键后字体变大且模糊
//div变小并且向左移动逐渐模糊
$('input').click(function(){
$('div>p').animate({
//字体变大并且变的模糊，font-size一定要用驼峰写法
fontSize:'30px',
opacity:'0.5'
},1500);
})
$('input').click(function(){
$('div').animate({
//点击按钮后div变小并且向左移动
left:'300px',
opacity:'0.7',
width:'400px',
height:'400px',
//垂直方向显示或者隐藏，如果水平方向的话改为width
//height:'toggle'
},1500)
})
})
</script>
</body>
</html>
