摘要：<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法来自定义动画</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<title>jQuery的animate()方法来自定义动画</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
<script type="text/javascript">
//在jQuery中用 animate()方法来自定义动画
//语法:$(selector).animate({params},speed,fn);
//params参数定义形成动画的css属性是必需的
// 停止动画：
// stop()方法用于停止动画或效果，在它他完成之前，这个方法适用于所有的jQuery
//效果函数，包括滑动、淡入淡出和自定义动画
// $(document).ready(function () {
// $('.bt1').click(function () {
// $('p').animate({fontSize:'40px'},1500);
// //属性名称中有-的，全部写成驼峰写法
// })
// $('.bt2').click(function () {
// $('div').animate({left:'200px',top:'200px',background:'blue'},1500)
// })
// })
$(document).ready(function () {
$('#right').click(function () {
$('.div1').animate({left:'+200px'},500);
$('.div1').animate({fontSize:'30px'},3000);
})
$('#stop').click(function () {
$('.div1').stop();
})
})
</script>
</head>
<body>
<!-- <button class="bt1">点击字体放大</button>
<p>444444444点击字体放大44444444444</p>
<button class="bt2">点击移动DIV</button>
<div></div> -->
<!-- 点击右移按钮，div右移，点击停止按钮当前效果停止 -->
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="div1">PHP中文网</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-12-01 09:28:29
老师总结：测试的上课代码，比较简单，限次要找点案例试试手奥！
