一个十分简短的Tween
说它短，是因为总共核心代码+注释不到100行。(需要声明一下的是此代码非原创，但略有修改，加了自已的部分注解)
1: function getEl(id) {
2: return typeof id === "string" ? document.getElementById(id) : id;
3: }
4: /**
5: * @fileoverview Tween
6: */
7: function Tween(C, B, A) {
8: if (C) {
9: this.time = parseInt(C * 1000)
10: }
11: if (B) {
12: this.transform = B
13: }
14: if (A) {
15: this.interval = A
16: }
17: }
18: Tween.prototype = {
19: interval: 40,
20: transform: function(A) {
21: return 1 - Math.pow(1 - A, 3)
22: },
23: time: 1000,
24: start: function(A, E, D) {
25: D = D || this.transform;
26: function H() {
27: I += C;
28: var J = I / F;//<==>(runTime / totalTime)
29: if (J >= 1) {//Tween over
30: A(1);
31: E();
32: clearInterval(B)
33: } else {
34: A(D(J) / G)
35: }
36: }
37: var C = this.interval;
38: var F = this.time;
39: var G = D(1);
40: var I = 0;
41: var B = setInterval(H, C);
42: return B
43: },
44: /**
45: * C {id|dom}
46: * F width
47: * E height
48: */
49: moveBy: function(C, F, E, G) {
50: C = getEl(C);
51: var I = C.offsetLeft;
52: var H = C.offsetTop;
53: var B = C.style;
54: function A(J) {
55: B.left = parseInt(I + J * F) + "px";
56: B.top = parseInt(H + J * E) + "px"
57: }
58: function D() {
59: C = B = null;
60: G && G()
61: }
62: return this.start(A, D)
63: },
64: /**
65: * D {id|dom}
66: * C start--opacity
67: * A end--opacity
68: * E complete--callback
69: */
70: opacity: function(D, C, A, E) {
71: D = getEl(D);
72: var G = A - C;
73: var M = document.defaultView && document.defaultView.getComputedStyle;
74: function B(I) {
75: I = C + G * I;
76: if (!M) {
77: if (I >= 1) {
78: D.style.filter = "";
79: return true;
80: }
81:
82: D.style.filter = 'alpha(opacity=' + (I * 100) + ')';
83: } else {
84: D.style.opacity = I;
85: }
86: }
87: function F() {
88: D = null;
89: E && E()
90: }
91: return this.start(B, F)
92: }
93: };
只提供两个方法，moveBy、opacity两个方法，一个是移动元素位置另一个是设置DOM元素的透明度。
调用也很简单，ex：
var tween = new Tween();
tween.moveBy("demo", 100, 0);
tween.opacity("demo", 1, .2);
在本页面直接运行查看效果：
