关于透明度抖动的问题

html+css



<div id="box"></div>


#box {
width: 100px;
height: 200px;
background: #000;
opacity: 1;
}


js=====
function css(obj,attr){
    return window.getComputedStyle(obj,false)[attr];
}
function fade(obj, target){
    obj.timer && clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var cur=css(obj,'opacity')*100;
        //var cur =Number(css(obj, 'opacity')).toFixed(1)*100 ;
        var alpha = (target - cur) / 8;
        alpha = alpha > 0 ? Math.ceil(alpha) : Math.floor(alpha);
        var stop = true;
        if(cur != target){
            cur += alpha;
            obj.style.filter = 'alpha(opacity=' + cur + ')';
            obj.style.opacity = cur / 100;
        }else{
            clearInterval(obj.timer);
            obj.timer = null;
        }
    }, 50);
}
var box=document.getElementById('box');
fade(box,30);

我想做一个透明度渐变的效果，但是渐变到最后不稳定。我找到原因是css()方法获得的数是很长的浮点型的，所以才会一直变动。我采用了js里面注释的那行之后就不那么明显了。我想知道有什么其他方法可以解决？

---

如果是调整一个元素的透明度，为什么不考虑jquery的animate函数呢？

$("#btu").click(function(){
  $("#ele").animate({ 
    opacity: 'toggle'
  }, 1000 );
});

---

js对小数的计算是会有误差的，你可以吧小数先转化成整数，比如透明度是0.1， 你可以乘以10，编程1，再做加减，做完后除以10