逐渐增加/减少javascript 2个元素

我正在尝试使用一个间隔来逐渐增加javascript中2个id的元素。 我给元素传递了两个id。我试着写条件，以便根据位置，元素的宽度在位置相关的方向上逐渐增加

如果传递的元素位置小于oldPosition，我希望左元素的值减小，右元素的值逐渐增大。如果传递的元素位置大于oldPosition，则相反

请注意，这是我的旧问题的扩展，已修复：）（）

这是我得到的

function grow(elementL, elementR, elementText, position)
{       
    window.loopTimer = setInterval(function() { 
        growInner(elementL, elementR, position); 
        /* fadeOut(elementText);    */
    }, 25);
}

var oldPosition = 0;
function growInner(elementL, elementR, position)
{       
    var htL = parseInt(document.getElementById(elementL).style.width,10);
    var htR = parseInt(document.getElementById(elementR).style.width,10);
    var movementL =0;
    var movementR =0;
    if(position < oldPosition)
    {
        movementL = htL + 10;
        movementR = htR - 10;
    } 
    if(position > oldPosition)
    {
        movementL = htL - 10;
        movementR = htR + 10;
    }

    if(position == 1 && htL < 600 || rtL > 250){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 2 && htL < 550  || rtL > 300){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 3 && htL < 300  || rtL > 550){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 4 && htL < 250  || rtL > 600){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else{
        clearInterval(loopTimer);
        return false;
    }
}

函数增长（elementL、elementR、elementText、position）
{       
window.loopTimer=setInterval（函数（）{
生长内部（元素、元素、位置）；
/*淡出（元素文本）*/
}, 25);
}
var-oldPosition=0；
函数（元素、元素、位置）
{       
var htL=parseInt（document.getElementById（elementL.style.width，10）；
var htR=parseInt（document.getElementById（elementR.style.width，10）；
var-movementL=0；
var-movementR=0；
如果（位置<旧位置）
{
movementL=htL+10；
movementR=htR-10；
} 
如果（位置>旧位置）
{
movementL=htL-10；
movementR=htR+10；
}
如果（位置==1&&htL<600 | | rtL>250）{
document.getElementById（elementL.style.width=movementL+'px'；
document.getElementById（elementR.style.width=movementR+'px'；
oldPosition=位置；
}
否则如果（位置==2&&htL<550 | | rtL>300）{
document.getElementById（elementL.style.width=movementL+'px'；
document.getElementById（elementR.style.width=movementR+'px'；
oldPosition=位置；
}
否则如果（位置==3&&htL<300 | | rtL>550）{
document.getElementById（elementL.style.width=movementL+'px'；
document.getElementById（elementR.style.width=movementR+'px'；
oldPosition=位置；
}
否则如果（位置==4&&htL<250 | | rtL>600）{
document.getElementById（elementL.style.width=movementL+'px'；
document.getElementById（elementR.style.width=movementR+'px'；
oldPosition=位置；
}
否则{
清除间隔（循环计时器）；
返回false；
}
}

我以前的代码位置条件没有正确地考虑单击位置的宽度增长方向。我减少了变量documnentGet调用，并使用布尔返回添加了一些安全性，以便在前一个计时器停止之前，它无法启动另一个计时器

我有一个JSFIDLE链接，但我似乎无法让它工作

功能移动开始（元素、元素、位置）
{
var moveTimer=setInterval（函数（）{
if（！移动过程（元素、元素、位置））{
清除间隔（移动计时器）；
}
}, 20);
}
var-oldPos=1；
功能移动过程（元素、元素、位置）{
移动=真；
var htL=parseInt（document.getElementById（elementL.style.width，10）；
var htR=parseInt（document.getElementById（elementR.style.width，10）；
var left=document.getElementById（elementL）；
var right=document.getElementById（elementR）；
如果（位置==1）{
var movementL=htL+5；
var movementR=htR-5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
if（movementL>=600&&position==1）
{
oldPos=1；
移动=假；
返回false；
}
}
else if（位置==2&&oldPos>2）{
var movementL=htL+5；
var movementR=htR-5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
如果（移动量>=500）
{
oldPos=2；
移动=假；
返回false；
}
}
如果（位置==2&&oldPos==1）{
var movementL=htL-5；
var movementR=htR+5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
如果（移动器>=300）
{
oldPos=2；
移动=假；
返回false；
}
}
否则如果（位置==3&&oldPos<3）{
var movementL=htL-5；
var movementR=htR+5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
如果（移动器>=500）
{
oldPos=3；
移动=假；
返回false；
}
}
else if（位置==3&&oldPos==4）{
var movementL=htL+5；
var movementR=htR-5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
如果（移动量>=300）
{
oldPos=3；
移动=假；
返回false；
}
}
否则如果（位置==4）{
var movementL=htL-5；
var movementR=htR+5；
left.style.width=movementL+'px'；
right.style.width=movementR+'px'；
如果（移动器>=600）
{
oldPos=4；
移动=假；
返回false；
}       
}   
返回true；
}

一个明显的错误：你在顶部使用了

setInterval（）

，在底部使用了

clearTimeout（）

。谢谢，更正：）但仍然不起作用：）你能不能因为我太懒而把一个例子扔进小提琴里？这不是一个解决方案，但你应该把所有的

d都转换过来
function moveStart(elementL, elementR, position)
{
    var moveTimer = setInterval(function() { 
        if (!movingProcess(elementL, elementR, position)) {
            clearInterval(moveTimer);
        }
    }, 20);
}

var oldPos = 1;
    function movingProcess(elementL, elementR, position) {
        moving = true;
        var htL = parseInt(document.getElementById(elementL).style.width,10);
        var htR = parseInt(document.getElementById(elementR).style.width,10);
        var left = document.getElementById(elementL);
        var right = document.getElementById(elementR);
        if(position==1){        
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 600 && position==1) 
            {
                oldPos = 1;
                moving = false;
                return false;
            }
        }
        else if(position==2 && oldPos > 2){
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 500) 
            {
                oldPos = 2;
                moving = false;
                return false;
            }
        }
        else if(position==2 && oldPos == 1){        
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 300) 
            {
                oldPos = 2;
                moving = false;
                return false;
            }
        }
        else if(position==3 && oldPos < 3){
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 500) 
            {
                oldPos = 3;
                moving = false;
                return false;
            }
        }
        else if(position==3 && oldPos ==4){
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 300) 
            {
                oldPos = 3;
                moving = false;
                return false;
            }
        }
        else if(position==4){
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 600) 
            {
                oldPos = 4;
                moving = false;
                return false;
            }       
        }   
        return true;
    }