<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 类似于原生animation动画. 属性变动产生动画.
$('.div1').click(function(){
$(this).animate({"width":500},100,function(){
$(this).animate({"height":500},100,function(){
$(this).animate({"backgroundColor":"red"})
})
})
})
/*
1.animate语句和css().语句一样, 可以直接调用style属性, 且调用过程当中都需要用大括号包含所调用内容.
2.animate参数可跟三个, ({"1.style属性":'属性的参数',"另一个属性":"另一个属性的参数"},动画持续时间,动画结束后调用的函数)
三个参数分别用,隔开.
3.animate无法调用背景颜色参数.
4.animate内, 和css(). 一样, 可以在style参数后面直接写数字,不用加单位和引号
*/
$('.div2').click(function(){
$(this).animate({'width':'+=100px'})
})
})
</script>
<style>
.div1{
width: 300px;
height: 100px;
margin: 50px auto;
background-color: gold;
}
.div2{
width: 300px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
