jQuery动画效果实验
总结:
animate动画效果，比较有意思。进度条就可以用 width:'toggle'，后者left:**px; 配和实现。
测试了改背景色变色使用不了，加了些css效果试了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery自定义动画</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{height: 200px;width: 200px;background: blue;position: absolute;}
</style>
<script type="text/javascript">
/* jQuery中我们使用 animate()方法创建自定义动画
语法:$(selector).animate({parmas}.speed,fn);
必需的 parmas 参数定义形成动画的 CSS属性。
可选的 speed 参数规定效果的时长。它可以取一下值:"slow" "fast"或者毫秒
可选的 fn 动画完成后完成的函数
stop() 方法用于停止动画或者效果，在它们完成之前 该方法适用于所有Jquery效果函数，包括滑动、淡入淡出和自定义动画
语法:$(selector).stop(stopAll,goToEnd)
可选的参数 stopAll 规定是否应该清楚动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
可选的参数goToEnd 规定是否立即完成当前动画。默认是 false
默认情况下 stop() 会清除在被选元素上指定的当前动画*/
$(document).ready(function(){
$('.but1').click(function(){
$('p').animate({fontSize:'40px'},1500) //属性名称font-size 一律改成驼峰写法:fontSize
})
//同时操作多个css属性
//使用预定义的值
$('.but2').click(function(){
$('div').animate({width:'toggle',opacity:'0.5',width:'300px',height:'100px',borderRadius:'50px'},2000)
$('div').animate({opacity:'0.5',width:'100px',height:'100px',borderRadius:'50px'},2000)
$('div').animate({opacity:'0.5',height:'200px',height:'200px',borderRadius:'100px'},2000)
$('div').animate({left:'400px',width:'200px'},2000)
})
})
</script>
</head>
<body>
<button>点击字体放大</button>
<p>jQuery中我们使用 animate()方法创建自定义动画</p>
<button>点击移动div</button>
<div></div>
</body>
</html>