1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
 8 </style>
 9 <script>
10 window.onload = function() {
11     
12     var oDiv1 = document.getElementById('div1');
13     
14     oDiv1.onclick = function() {
15         
16         startMove(this, {
17             width : 200
18         }, 10, function() {
19             startMove(this, {
20                 height : 200
21             }, 10);
22         });
23     }
24     
25     function startMove(obj, json, iSpeed, fn) {
26         clearInterval(obj.iTimer);
27         var iCur = 0;
28             
29         obj.iTimer = setInterval(function() {
30             
31             var iBtn = true;
32                         
33             for ( var attr in json ) {
34                                 
35                 var iTarget = json[attr];
36                 
37                 if (attr == 'opacity') {
38                     iCur = Math.round(css( obj, 'opacity' ) * 100);
39                 } else {
40                     iCur = parseInt(css(obj, attr));
41                 }
42                 
43                 if (iCur != iTarget) {
44                     iBtn = false;
45                     if (attr == 'opacity') {
46                         obj.style.opacity = (iCur + iSpeed) / 100;
47                         obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
48                     } else {
49                         obj.style[attr] = iCur + iSpeed + 'px';
50                     }
51                 }
52                 
53             }
54             
55             if (iBtn) {
56                 clearInterval(obj.iTimer);
57                 fn && fn.call(obj);
58             }
59             
60         }, 30);
61     }
62     
63     function css(obj, attr) {
64         if (obj.currentStyle) {
65             return obj.currentStyle[attr];
66         } else {
67             return getComputedStyle(obj, false)[attr];
68         }
69     }
70     
71 }
72 </script>
73 </head>
74 
75 <body>
76     <div id="div1"></div>
77 </body>
78 </html>