                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

好奇怪啊，是我的浏览器兼容问题吗？IE9以上了，用的opacity属性，JS代码如下,如果iTarget输入为1，就只会到0.7就不动了

var timer = null

var alpha = 1
function starttou(iTarget){
var oDiv = document.getElementById('oDiv')
console.log(oDiv.style.opacity)
clearInterval(timer)
var speed = null;
if(iTarget >alpha){
speed = 0.1
} else if(iTarget < alpha){
speed = -0.1
}
timer = setInterval(function(){
if(iTarget ==alpha) {
clearInterval(timer)
}
else{
alpha = alpha + speed
alpha = Math.floor(alpha*10)/10 //不知道为什么，输出的alpha不是整数，这里把它取整了
oDiv.style.opacity =alpha

}

},30)

}

慕粉3428169

2016-08-15

源自：JS动画效果 2-2

关注问题我要回答

729

操作

收起

3 回答

湛瞳
2016-08-26

解决办法

   var oDiv = document.getElementById('div1');
   clearInterval(timer);
   var speed = null;
   if(opa >alpha){
       speed = 0.1
   } else if(opa < alpha){
       speed = -0.1
   }
   timer = setInterval(function(){
       if(opa ==alpha) {
           clearInterval(timer);
       }
       else{
          alpha = alpha + speed;
          alpha = opa > alpha ? Math.ceil(alpha * 10) / 10 : Math.floor(alpha * 10) / 10;
          oDiv.style.opacity = alpha;
      }
   },30)

其中Math.ceil()是向上取整。

仅供参考