jquery animate 动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});下面来写一个div放大的动画效果。
上面首先写好一个div，下面来使用jquery来实现放大的效果。
点击动画的按钮，div的宽高就会放大。这次的放大是同时实现了width和height的变化。
可以使用回调函数分别变化
width、height，如下：
使用animate最后的回调函数，再执行一个animate，就可以分开运行动画效果的了。
效果如下：
参数可以写成数字表达式：
另外除了上面动画，还可以实现一个这样的效果。
每点击按钮一次，触发动画效果，就将div的宽度增加100px。
实现效果如下：
- 点击第一次触发，如下：
- 点击第二次触发，如下：
- 点击第三次触发，如下：
- 代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').click(function(){
$('div').animate({
'width': '+=100'
},1000,'swing',function(){
$('div').animate({
'height': '+=100'
},1000,'swing')
})
})
})
</script>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid #ccc;
border-radius: 15px;
background-color: gold;
}
</style>
</head>
<body>
<input type="button" name="" value="动画">
<div></div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.04.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号