53 jQuery-animate()方法_综合

1.效果图

在这里插入图片描述

2.HTML代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>53 jQuery-animate()方法</title><style type="text/css">.divFrame{border:solid 1px #ccc;background-color:#eee;width:60px;height:50px;font-size:13px;padding:5px}</style>
</head>
<body><div class="divFrame">点击变大</div><script src="../jquery.min.js"></script>
<script type="text/javascript">$(function(){//div元素点击事件$(".divFrame").click(function(){//宽与高变化的动画效果$(this).animate({width:"20%", height:"70px"}, 3000, function(){//动画完成时执行的一个回调函数$(this).css({"border":"solid 3px #666"}).html("变大了");})})})
</script>
</body>
</html>