Question

我正在尝试使用Interval逐步增加javascript中2个id的元素。我正在为元素传递两个id。我正在尝试写入条件，以便根据位置，元素的宽度在取决于位置的方向上逐渐增加。

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

请注意，这是我的旧问题的扩展，已修复:)（Javascript gradual width increase）

继承人我有什么

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

Answer 1

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

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

http://jsfiddle.net/2mRsG/3/

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

逐步增加/减少javascript 2元素

1 个答案: