Question

http://jsfiddle.net/9DP2d/

    setInterval(toggleredBox, 1000);
    setInterval(toggleorangeBox, 1000);
    setInterval(toggleyellowBox, 1000);

var toggleredBox = function toggleredBox() {
    $(".redBox").slideToggle(1000);
};

var toggleorangeBox = function toggleorangeBox() {
    $(".orangeBox").slideToggle(1000);
};

var toggleyellowBox = function toggleyellowBox() {
    $(".yellowBox").slideToggle(1000);
};

所以问题是所有3个盒子都在同时射击：有没有办法让它们一个接一个地同时进行？

Answer 1

可以这样做：

setInterval(toggleredBox, 3000);

var toggleredBox = function toggleredBox() {
    $(".redBox").slideToggle(1000);
    setTimeout(toggleorangeBox, 1000);
};

var toggleorangeBox = function toggleorangeBox() {
    $(".orangeBox").slideToggle(1000);
    setTimeout(toggleyellowBox, 1000);
};

var toggleyellowBox = function toggleyellowBox() {
    $(".yellowBox").slideToggle(1000);
};

在最后一个函数中还可以有另一个setTimeout，只需调用你想要动画开始的函数。

fiddle

Answer 2

您可以使用setTimeout do延迟启动：

setInterval(toggleredBox, 1000);
setTimeout(function(){
  setInterval(toggleorangeBox, 1000);
}, 1000):
setTimeout(function(){
  setInterval(toggleyellowBox, 1000);
}, 2000):

您还可以为所有三个使用单个间隔，并使用计数器检查何时第一次切换它们：

setInterval(toggleBoxes, 1000);

var cnt = 0;

function toggleBoxes() {
  $(".redBox").slideToggle(1000);
  if (cnt > 0) $(".orangeBox").slideToggle(1000);
  if (cnt > 1) $(".yellowBox").slideToggle(1000);
  cnt++;
};

演示：http://jsfiddle.net/9DP2d/2/

Answer 3

尝试同时实现＆＃34;＆＃34; （无论那意味着什么）：

setInterval(toggleredBox, 1000);

var toggleredBox = function() {
    $(".redBox").slideToggle(1000, toggleorangeBox);
};

var toggleorangeBox = function() {
    $(".orangeBox").slideToggle(1000, toggleyellowBox);
};

var toggleyellowBox = function() {
    $(".yellowBox").slideToggle(1000);
};

有没有办法一秒钟地启动一个setInterval？

3 个答案: