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);
};
所以问题是,所有三个盒子都同时发射:有没有办法让它们同时发射一个又一个?
可以这样做:
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
,只需调用希望动画开始的函数即可。
小提琴
您可以使用setTimeout延迟启动:
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/
尝试实现"一个接一个同时"(无论这意味着什么(:
setInterval(toggleredBox, 1000);
var toggleredBox = function() {
$(".redBox").slideToggle(1000, toggleorangeBox);
};
var toggleorangeBox = function() {
$(".orangeBox").slideToggle(1000, toggleyellowBox);
};
var toggleyellowBox = function() {
$(".yellowBox").slideToggle(1000);
};