修改JQuery动画到循环中的功能？

Question

我尝试使用Jquery在每次循环中满足某些条件时将元素的背景颜色从红色淡出。问题是下面的代码本身就可以工作，但是当它放在一个循环中时它就不会变成红色;我同时想到了火焰下的多个实例并且它崩溃了。在继续循环之前，没有建立一个系统来检测下面的函数何时完成，是否有办法确保每次从头开始调用它而不会崩溃？

        $('#outputdiv').animate({backgroundColor: 'red'}, 2000, function() {
            $('#outputdiv').animate({backgroundColor: 'white'}, 2000);
        });

Answer 1

你真的在使用循环（for，while）吗？如果是这样，在#output上多次执行 将不会有任何兴趣......

但是，如果您希望该函数重复，则可以使用递归。只需将该代码放在函数中，作为回调，再次调用它：

function myFunction(){
    $('#outputdiv').animate({backgroundColor: 'red'}, 2000, function() {
        $('#outputdiv').animate({backgroundColor: 'white'}, 2000, myFunction);
    });
}

myFunction();

JS Fiddle Demo

修改

要让动画在再次执行之前完成，您可以执行以下操作：

var isAnimating = false;

function myFunction(){
    if(isAnimating) return false;
    isAnimating = true;
    $('#outputdiv').animate({backgroundColor: 'red'}, 2000, function() {
        $('#outputdiv').animate({backgroundColor: 'white'}, 2000, function(){
            isAnimating = false;
        });
    });
}

someSortOfLoop(myFunction);

JS Fiddle Demo

Answer 2

这是你可以做的，把颜色变成红色的检查器：

        $('#outputdiv').animate({backgroundColor: 'red'}, 2000, function() {
            if ($('#outputdiv').is(':animated')) 
               $('#outputdiv').animate({backgroundColor: 'white'}, 2000);
        });