<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title></title>
???<style>
???????div {
???????????width: 100px;
???????????height: 100px;
???????????background-color: pink;
???????????position: absolute;
???????????left: 0;
???????????top: 50px;
???????????border-radius: 50%;
???????}
???</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
???var btn200 = document.getElementById("btn200");
???var btn400 = document.getElementById("btn400");
???var box = document.getElementById("box");
???btn200.onclick = function() {
???????animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")});
???}
???btn400.onclick = function() {
???????animate(box,{top:500,opacity:10});
???}
???// 多个属性运动框架 ?添加回调函数
???function animate(obj,json,fn) { ?// 给谁 ???json
???????clearInterval(obj.timer);
???????obj.timer = setInterval(function() {
???????????var flag = true; ?// 用来判断是否停止定时器 ??一定写到遍历的外面
???????????for(var attr in json){ ??// attr ?属性 ????json[attr] ?值
???????????????//开始遍历 json
???????????????// 计算步长 ???用 target 位置 减去当前的位置 ?除以 10
??????????????// console.log(attr);
???????????????var current = 0;
???????????????if(attr == "opacity")
???????????????{
???????????????????current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
???????????????????console.log(current);
???????????????}
???????????????else
???????????????{
???????????????????current = parseInt(getStyle(obj,attr)); // 数值
???????????????}
??????????????// console.log(current);
????????????????// 目标位置就是 ?属性值
???????????????var step = ( json[attr] - current) / 10; ?// 步长 ?用目标位置 - 现在的位置 / 10
???????????????step = step > 0 ? Math.ceil(step) : Math.floor(step);
???????????????//判断透明度
???????????????if(attr == "opacity") ?// 判断用户有没有输入 opacity
???????????????{
????????????????????if("opacity" in obj.style) ?// 判断 我们浏览器是否支持opacity
????????????????????{
????????????????????????// obj.style.opacity
????????????????????????obj.style.opacity = (current + step) /100;
????????????????????}
???????????????????else
????????????????????{ ?// obj.style.filter = alpha(opacity = 30)
????????????????????????obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
????????????????????}
???????????????}
???????????????else if(attr == "zIndex")
???????????????{
???????????????????obj.style.zIndex = json[attr];
???????????????}
???????????????else
???????????????{
???????????????????obj.style[attr] = current ?+ step + "px" ;
???????????????}
???????????????if(current != json[attr]) ?// 只要其中一个不满足条件 就不应该停止定时器 ?这句一定遍历里面
???????????????{
???????????????????flag = ?false;
???????????????}
???????????}
???????????if(flag) ?// 用于判断定时器的条件
???????????{
???????????????clearInterval(obj.timer);
???????????????//alert("ok了");
???????????????if(fn) ??// 很简单 ??当定时器停止了。 动画就结束了 ?如果有回调，就应该执行回调
???????????????{
???????????????????fn(); // 函数名 + ?（） ?调用函数 ?执行函数
???????????????}
???????????}
???????},30)
???}
???function getStyle(obj,attr) { ?// ?谁的 ?????那个属性
???????if(obj.currentStyle) ?// ie 等
???????{
???????????return obj.currentStyle[attr]; ?// 返回传递过来的某个属性
???????}
???????else
???????{
???????????return window.getComputedStyle(obj,null)[attr]; ?// w3c 浏览器
???????}
???}
</script>
原生JS封装animate运动框架
原文地址：http://www.cnblogs.com/dragon126/p/7653167.html