<!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;
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>
