摘要：<!DOCTYPE html> <html> <head> <title>JQuery的动画效果--自定义动画</title> <meta charset="utf-8"> &nb
<!DOCTYPE html>
<html>
<head>
<title>JQuery的动画效果--自定义动画</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.box{height: 120px;width: 100px;float: left;margin-right: 20px;}
.ele1{height: 100px;width: 100px;background: blue;position: absolute;text-align: center;line-height: 100px;}
.ele2{height: 100px;width: 100px;background: red;
border-radius: 100px;position: absolute;
text-align: center;line-height: 100px;}
button{height: 40px;width: 100px;border:1px solid #000;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.bt1').click(function(){
$('.ele1').animate({
right:'50px',
opacity:'0.4'
},3000)
});
$('.stop1').click(function(){
$('.ele1').stop()
})
$('.bt2').click(function(){
$('.ele2').animate({
bottom:'50px',
height:'300px',
width:'300px',
borderRadius:'300px',
fontSize:'100px'
},3000)
});
$('.stop2').click(function(){
$('.ele2').stop()
})
})
</script>
</head>
<body>
<div class="box">
<button class="bt1">点击抛出方块</button>
<button class="stop1">停止</button>
<div class="ele1">方块</div>
</div>
<div class="box">
<button class="bt2">点击球体落下</button>
<div class="ele2">球体</div>
<button class="stop2">停止</button>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-12 09:05:30
老师总结：代码方面写的没啥问题！但是缺少总结和归纳！下次记得补上！！！总结和归纳也是很重要的！别小看了这些东西！！
