Javascript 如何在一个时间间隔内循环这两个不透明度函数？

我的节目：

我正在尝试复制我的change size函数的格式，该函数通过动画函数的间隔，自动循环并不断更改div的大小。但是，当我尝试对div的change opacity执行相同的格式时，它不起作用。相反，它只工作一次，使不透明度从1变为0.9并完成。我将尝试一个for循环，但我不认为我应该这样做，因为animate函数应该已经为我循环了，但我不确定

这是一个“更改大小”功能，它可以将div从150更改为50

function shrinkSize(elem){
    var currentWidth = parseInt(getTheStyle(elem.id,'width'))-2;
    elem.style.width=currentWidth+"px";

    if(parseInt(elem.style.width)==50){
        clearInterval(sizeTimer);
        sizeTimer = setInterval(function(){growSize(elem);},10);
    }
    
}

function growSize(elem){
        var currentWidth = parseInt(getTheStyle(elem.id,'width'))+2;
        elem.style.width=currentWidth+"px";
    
    if(parseInt(elem.style.width)==150){
        clearInterval(sizeTimer);
        sizeTimer = setInterval(function(){shrinkSize(elem);},10);
    }
}

这是为循环创建间隔的动画功能

var moveTimer;
var sizeTimer;
var opacityTimer;
var mover = document.getElementById("movingElem");

    function Animate(elem){
        //only clears most recent interval, cant clear anything before that
        clearInterval(moveTimer);
        clearInterval(sizeTimer);
        clearInterval(opacityTimer);
        moveTimer = setInterval(function(){MoveRight(elem,'wrapper');}, 10);//a function that'll call another function after certain amount of time, speed of animation, once every ten milisecond
        sizeTimer = setInterval(function(){shrinkSize(elem);}, 10);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);}, 10);
    
    }

这是我不工作的“更改不透明度”函数，我试图遵循与“更改大小”函数相同的格式

function increaseOpacity(elem){
    var currentOpacity = parseInt(getTheStyle(elem.id,'opacity'))+0.1;
    elem.style.opacity= parseInt(currentOpacity);
    console.log(currentOpacity);

    if(parseInt(elem.style.opacity)==1){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);},10);
    }
}


function decreaseOpacity(elem){
    var currentOpacity = parseInt(getTheStyle(elem.id,'opacity'))-0.1;
    elem.style.opacity=currentOpacity;


    if(parseInt(elem.style.opacity)==0){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){increaseOpacity(elem);},10);
    }
}

我知道这和不透明度线不匹配这个像素的变化大小有关，但我不知道如何让它工作

elem.style.opacity= parseInt(currentOpacity);

---

---

我认为问题在于您使用了

parseInt

，它将数字解析为一个四舍五入的整数（在您的例子中，在第一次收缩之后，它将不透明度从“0.9”解析为0）。在不透明的情况下，您处理的是小数，因此必须使用

parseFloat

function increaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))+0.1;
    elem.style.opacity= parseFloat(currentOpacity);
    console.log(currentOpacity);

    if(parseFloat(elem.style.opacity)==1){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);},10);
    }
}


function decreaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))-0.1;
    elem.style.opacity=currentOpacity;

function increaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))+0.1;
    elem.style.opacity= parseFloat(currentOpacity);
    console.log(currentOpacity);

    if(parseFloat(elem.style.opacity)==1){
        clearInterval(opacityTimer);
        opacityTimer = setInterval(function(){decreaseOpacity(elem);},10);
    }
}


function decreaseOpacity(elem){
    var currentOpacity = parseFloat(getTheStyle(elem.id,'opacity'))-0.1;
    elem.style.opacity=currentOpacity;