JavaScript / jQuery - 在添加和删除类与下一个函数之间添加延迟[重复]

Question

可能重复：
jquery add a fade to an .addClass

这是我的 jsFiddle 示例：http://jsfiddle.net/sLzGc/

我正在尝试创建选项 1 到 3 正在旋转的效果。每隔 1.2 秒，green 类就会从拥有它的选项中删除，green 类会添加到下一个选项中。这个想法是，在执行最终函数 alert('Finished') 之前，三个选项的轮换发生五次 (i<5)。

我正在尝试使用 setTimeout()，但我愿意使用 .delay()、另一个 jQuery 函数或其他选项。

这是我的 JavaScript/jQuery：

alert('Start');

sampleFunction();

function sampleFunction() {

for (i=0; i<5; i++) {

  setTimeout(function() {
    $('#option2').addClass('green');
    $('#option1').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option3').addClass('green');
    $('#option2').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option1').addClass('green');    
    $('#option2').removeClass('green');
  },1200);

}//end for loop

}

alert('Finished');​

我的整个例子都在 jsFiddle 上：http://jsfiddle.net/sLzGc/

感谢您提供的任何帮助或见解！

Answer 1

这是我解决问题的方法：

​(​function() {
    var options = [$("#option1"), $("#option2"), $("#option3")],
        cycles = 5,
        i = 0,
        $last = $(null);

    (function next() { 
        if(i < cycles * options.length) {
            $last.removeClass("green");
            $last = options[i % options.length].addClass("green");
            i++;
            setTimeout(next, 1200);
        } else {
            $last.removeClass("green");
            alert("finished!"); //do any other "we're done" stuff here.
        }
    }());
}());​

这很简单，很酷的部分是您可以将元素添加到元素列表中以非常容易地循环（只需将它们添加到options）。如果需要，您还可以设置周期数。我没有将类或延迟长度设为变量，但如果您想这样做，那将非常简单。

您可以在此处查看演示：

http://jsfiddle.net/D7SR8/

您还可以考虑在末尾添加一个回调函数并将alert() 放入其中。这样会更可重用。

Answer 2

如果您想使用 setTimeouts，那么您的代码可能如下所示：

var iteration = 0;
alert('start');
rotateColors();

function rotateColors() {
    setTimeout(function() {
        $('#option2').addClass('green');
        $('#option1').removeClass('green');
            setTimeout(function() {
                $('#option3').addClass('green');
                $('#option2').removeClass('green');
                setTimeout(function() {
                    $('#option1').addClass('green');    
                    $('#option3').removeClass('green');
                    iteration += 1;

                    if(iteration < 5)
                        rotateColors();
                    else
                        alert('finished');
            },1200);
        },1200);
    },1200);   
}

Live DEMO

Answer 3

alert('Start');
 var varobj=0;
sampleFunction();

function sampleFunction() {
setTimeout(function() {
    $('#option2').addClass('green');
    $('#option1').removeClass('green');

  },1200, setTimeout(function() {
        $('#option3').addClass('green');
        $('#option2').removeClass('green');

      },1200,setTimeout(function() {
            $('#option1').addClass('green');    
            $('#option3').removeClass('green'); if(varobj<5){varobj=varobj+1;sampleFunction();}else{ alert('finished');}
      },1200);););}

这是在 settimeout 中执行其他函数后调用函数的方法

Answer 4

我同时使用 setTimeout() 和 setInterval() 来执行此操作，然后在 5 次执行后清除间隔。如果您希望它们都以某种颜色或任何其他修改结束，请告诉我！我刚刚对其进行了修改以遍历您的询问方式。 http://jsfiddle.net/sLzGc/9/

sampleFunction();

function sampleFunction() {
    alert('Start');
    $('#option1').addClass('disabled');

    var i = 0;
    var shift = function() {
        setTimeout(function() {
            $('#option1').toggleClass('disabled');
            $('#option2').toggleClass('disabled');
        }, 0);
        setTimeout(function() {
            $('#option2').toggleClass('disabled');
            $('#option3').toggleClass('disabled');
        }, 400);
        setTimeout(function() {
            $('#option3').toggleClass('disabled');
            $('#option1').toggleClass('disabled');
        }, 800);
    };
    var interval = setInterval(function() {
        ++i;
        if (i == 5) {
            clearTimeout(interval);
            alert('Finished');
        } else {
            shift();
        }
    }, 1200);

    shift();
}​