<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>47-jQuery自定义动画</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.9.1.min.js"></script>
<script>
$(function () {
//动画时长
var $time = 1000;
//指定动画节奏,默认是swing两头慢,中间快|linear匀速的
var $jiezou1 = "swing";
var $jiezou2 = "linear";
//动画执行完毕后 执行回调函数
function test(){};
//直接修改属性
var $style = {marginLeft:800}
//累加
var $style1 = {width:"+=100"}
//关键字
var $style2 = {width:"hide"}// 隐藏宽度
var $style2 = {width:"toggle"}// 如果有宽度就隐藏宽度,如果没有就显示宽度
$("button").eq(0).click(function () {
$(".one").animate($style,$time,$jiezou1,test)
$(".two").animate($style,$time,$jiezou2,test)
});
$("button").eq(1).click(function () {
$(".one").animate($style1,$time,$jiezou1,test)
});
$("button").eq(2).click(function () {
$(".one").animate($style2,$time,$jiezou1,test)
});
});
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
