Question

应该是一个非常简单的。我希望这个jQuery动画在1个循环之后停止运行，而不是无限循环。

这绝对是一件简单的事情，但这是我一段时间以来一直帮助过的代码，我无法解释为什么它会循环播放。

感谢。

的jsfiddle： http://jsfiddle.net/SFejj/和代码：

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
        function() {
            move(jElem, !bUp, iSpeed);
        }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed);
            }, 
            iTime
        );
    });
});

Answer 1

你有移动函数递归调用move函数。导致堆栈溢出的好方法！

Answer 2

只需移除再次调用move的animate上的回调即可。

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
           opacity: (bUp ? '+' : '-') + '0.1',
           width: (bUp ? '+' : '-') + '=200',
           height: (bUp ? '+' : '-') + '=200'
        },iSpeed
    );
}

你之前是这样做的

function move(jElem, bUp, iSpeed) {
    jElem.animate(
      {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
         iSpeed,
         function() {                      
            move(jElem, !bUp, iSpeed);   // move will be called at the end of animate recursively
        }
      }
    );
}

Answer 3

如果你想循环1次，只需添加一个增量为1的变量。你可以改变行loopTimes < 1以使函数在你想要的任意数量的循环后停止循环。

function move(jElem, bUp, iSpeed, loopTimes) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
                    if(loopTimes < 1)
                    {
                       loopTimes++;
                       function() {
                           move(jElem, !bUp, iSpeed, loopTimes);
                       }
                    }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed, 0);
            }, 
            iTime
        );
    });
});

防止jQuery中的无限循环

3 个答案: