jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,'swing',function(){
alert('done!');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('.box').animate({'width':600},1000,function(){
$('.box').animate({'height':400},1000,function(){
$('.box').animate({'opacity':0});
});
});
})
$('#btn2').click(function(){
$('.box2').stop().animate({'width':'+=100'});
})
})
</script>
<style type="text/css">
.box,.box2{
width:100px;
height:100px;
background-color:gold;
}
</style>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>
<br />
<br />
<input type="button" name="" value="动画" id="btn2">
<div class="box2"></div>
</body>
</html>
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
