<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
margin-top: 10px;
background: red;
}
.two{
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*
第一个参数
接受一个对象，可以在对象中修改属性。
第二个参数
指定动画时常。
第三个参数
指定动画节奏，默认就是swing，可写可不写
第四个参数
动画结束后执行的回调函数。
*/
$("button").eq(0).click(function(){
// 三个参数的情况。
// $(".one").animate({
// width:500
// },1000,function(){
//
// });
//四个参数的情况,第三个参数可以控制运动的轨迹。liner是匀速执行。swing是默认的，前慢中快后慢
$(".one").animate({
marginLeft:500
},5000,"linear",function(){
});
$(".two").animate({
marginLeft:500
},5000,"swing",function(){
});
});
/*
* 累加属性
* 在原本属性的基础上增加属性。
* 需要在对象里的参数值写字符串 "+=你想累加的数值"
*/
$("button").eq(1).click(function(){
$(".one").animate({
width:"+=100" //一次在原本基础上增加100px
},1000,"linear",function(){
});
});
/*
* 关键字
* 使元素按照关键字进行动画。
*/
$("button").eq(2).click(function(){
$(".one").animate({
//width:"hide" //使宽度隐藏。
width:"toggle" //如果有宽度就隐藏，没宽度就显示
},1000,"linear",function(){
});
});
});
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>