Question

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

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

我正在尝试创建一个效果，其中显示选项1到3正在旋转。每隔1.2秒，green类将从包含它的选项中删除，green类将添加到下一个选项中。我们的想法是，在执行最终函数i<5之前，通过三个选项的旋转发生了五次（alert('Finished')）。

我正在尝试使用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);););}

这是一个approch如何在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();
}

JavaScript / jQuery - 添加和删除类和下一个函数之间的延迟

4 个答案: