1

可能重复：
jquery 向 .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/

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

4

4 回答 4

2

这是我解决问题的方法：

​(​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()放入其中。那将更可重用。

于 2012-09-08T01:28:49.210 回答
1

如果您想使用 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);   
}

现场演示

于 2012-09-08T01:05:40.163 回答
0 
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 中执行其他函数后如何调用函数的方法

于 2012-09-08T01:22:18.007 回答
0

我同时使用setTimeout()andsetInterval()来执行此操作，然后在执行 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();
}​
于 2012-09-08T01:25:02.023 回答