不知道是不是clearTimeout的问题？

<html>
<head>
    <title>1</title>
<script>
//var from = [255,255,255], to = [50,205,50],
var foo = function(){
function oneColor(from, to){
stepR = (to[0] - from[0]) / 20,
stepG = (to[1] - from[1]) / 20,
stepB = (to[2] - from[2]) / 20,
color = [], res = [];

for(var i=0, r=from[0], g=from[1], b=from[2]; i<20; i++){
color[i] = [r, g, b]; r += stepR; g += stepG; b += stepB;
}
color[i] = to;
for(var j = 0; j<color.length; j++){
(function(j){
res[j] = color[j].map(function(x){
return Math.floor(x);})
})(j);
}

return res;
}

return function(fromArr, toArr){
return  oneColor(fromArr, toArr);
}
}()

var colorTrans = function(fromArr, toArr, elem){
this .index = 0;
this .step = 20;
this .fromArr = fromArr;
this .toArr = toArr;
this .timer = null;
this .color = foo(fromArr, toArr);
this .elem = elem;
this .check();
}

colorTrans.prototype = {
check:function(){
return this .elem.style.backgroundColor;
},

setRgb:function(){
this .elem.style.backgroundColor = "rgb(" + this .color[this .index].join(',') + ")";
},

transIn:function(){

this .stop();this .index++; 
if(this .index < this .color.length){
this .setRgb();
var that = this;
this .timer = setTimeout(function(){
that.transIn();
}, this .step);
}

},

transOut:function(){

this .stop();this .index++;
if(this .index < this .color.length){
this .setRgb();
var that = this;
this .timer = setTimeout(function(){
that .transOut();
}, this .step);
}

},

stop:function(){
clearTimeout(this .timer);
}
}

function changeColor(){
var idMenu = document.getElementById('idMenu');
var idMenuTds = idMenu.getElementsByTagName('td');

for(var i=0; i < idMenuTds.length; i++){
idMenuTds[i].onmouseover = function(){
var go = new colorTrans([255,255,255], [50,205,50], this);
go.transIn();
}

idMenuTds[i].onmouseout = function(){
var go = new colorTrans([50,205,50], [255,255,255], this);
go.transOut();
}
}
}

window.onload = changeColor;

</script>

<style>
#idMenu{
width:600px;
background:#DBDBDB;
text-align:center;
line-height:25px;
table-layout:fixed;
}

#idMenu td{
color:#666;
background:white;
cursor:pointer;
}
</style>
</head>

<body>
    <table id="idMenu" cellspacing="5" cellpadding="0">
<tr>
<td>Cropper</td>
<td>Tween</td>
<td>Tween</td>
<td>Resize</td>
<td>Drag</td>
<td>Tooltips</td>
</tr>
</table>


</body>
</html>