将JQuery动画修改为循环中的函数

Modify JQuery Animate To Function In Loop?

本文关键字：函数 循环 JQuery 动画 修改      更新时间：2023-09-26

每次循环中满足特定条件时，我都试图使用Jquery将元素的背景颜色从红色淡出。问题是，下面的代码可以自己工作，但当放在循环中时，它永远不会变红；我在想多个实例同时处于动画火力下，它会崩溃。除了在继续循环之前建立一个系统来检测下面的函数何时完成之外，有没有一种方法可以确保每次调用它时都不会崩溃？

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

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

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

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

JS Fiddle演示

编辑

要允许动画在再次执行之前完成，您可以这样做：

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演示

这是您可以做的，以放置一个颜色已变为红色的检查器：

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