运行有限循环动画的更好方法

时间:2012-12-28 20:10:46

标签: javascript jquery css-transitions

首先,this code虽然丑陋,却可以用于所有意图和目的。然而,这真的让我都病了,疯一下。

对于懒惰,代码的主要部分很糟糕:

setTimeout(function() {
    toggle(); //off
    setTimeout(function() {
        toggle(); //on
        setTimeout(function() {
            toggle(); //off
            setTimeout(function() {
                toggle(); //on, stays for stallTime
                setTimeout(function() {
                    toggle(); //off
                    callback();
                }, stallTime);
            }, 300);
        }, 300);
    }, 300);
}, 300);

我当然希望通过更改元素上的CSS类来控制我的动画。但是,transitionendwebkitTransitionEnd等等至少不可靠。我被迫采用这种可怕的代码吗?理想情况下,我希望能够设置一个可变数量的“闪烁”,但这段代码太过苛刻了。

请救我脱离污秽。

2 个答案:

答案 0 :(得分:3)

var count = 5;
var i = setInterval(function() {
    toggle();
    count--;
    if(count == 0) {
        clearInterval(i);
        callback();
    }
}, 300);

答案 1 :(得分:1)

为了避免setInterval,我写了一个递归函数:

// link.addClass('hover'); //on - no longer needed

flash = function(count) {
    if (count > 1) {
        setTimeout(function() {        
            toggle();
            flash(count - 1);
        }, 300);
    } else {
        setTimeout(function() {
            toggle(); //off
            callback();
        }, stallTime);            
    }                
}

flash(6); // 2 * the number of flashes.