时间戳

首页 > 解决方案 > 如何在一个区间内循环这两个不透明度函数？

javascript - 如何在一个区间内循环这两个不透明度函数？

问题描述

我的程序：https ://jsfiddle.net/60ucsfrb/

我正在尝试复制我的更改大小函数的格式，该函数设法自行循环并在动画函数的间隔的帮助下不断更改 div 的大小。但是，当我尝试对 div 的更改不透明度执行相同的格式时，它不起作用。相反，它只工作一次，使不透明度从 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);
    
    }

这是我的 NOT WORKING 更改不透明度函数，我试图遵循与更改大小函数相同的格式。

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";

标签： javascriptfunctionintervals

解决方案

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

推荐阅读