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

Question

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

这是有效的更改大小功能，可以将 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);

elem.style.width=currentWidth+"px";

Answer 1

我认为问题在于您使用 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;

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

How do I loop these two opacity functions in an interval?

javascript

function

intervals