Javascript 使用jQuery按顺序计时淡入淡出

我想做的是：

当用户点击一个触发器时，屏幕上会出现一个覆盖图（正在工作）

覆盖淡入后，我希望能够控制UL淡入列表项之前的延迟时间

一旦列表项完成淡入，我想触发页面上的另外两个元素淡入

现在我已经到了

列表项

fadeIn的地步，但我不知道如何控制它们淡入前的时间

有人能帮忙吗

$（文档）.ready（函数（）{
变量平方=$（'.square'）；
var ocn=$（'非画布导航'）；
var标志=假；
square.click（函数（）{
ocn.addClass（'showOCN'）；
flag=true；
$（“.mainNav li”）。每个（功能（i）{
美元（此）.delay（300*i）.fadeIn（1000）；
});
});
});
*{
填充：0；
保证金：0；
}
.集装箱{
身高：100%；
宽度：100%；
位置：相对位置；
}
.第页{
边框：1px实心；
宽度：90%；
身高：90%；
最小高度：500px；
}
.广场{
高度：40px；
宽度：40px；
位置：相对位置；
左：50px；
顶部：10px；
背景色：#444；
光标：指针；
}
.非帆布导航{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（0,0,0,6）；
排名：0；
左：0；
不透明度：0；
z指数：-1；
过渡：全部。3秒轻松；
}
肖沃肯先生{
不透明度：1；
z指数：2；
}
mainNav先生{
列表样式类型：无；
左：20%；
顶部：50px；
位置：相对位置；
}
.mainNav>li{
利润率：30px 0px；
显示：无；
}


项目
项目
项目
项目
项目

您可以使用
setTimeout（）
触发fadeIn：

setTimeout(function(){
  $(".mainNav li").each(function(i) {
    $(this).delay(300 * i).fadeIn(1000);
  });
}, 2000); //After 2 seconds

代码：


$（文档）.ready（函数（）{
变量平方=$（'.square'）；
var ocn=$（'非画布导航'）；
var标志=假；
square.click（函数（）{
ocn.addClass（'showOCN'）；
flag=true；
setTimeout（函数（）{
$（“.mainNav li”）。每个（功能（i）{
美元（此）.delay（300*i）.fadeIn（1000）；
});
}，2000）；//2秒后
});
});
*{
填充：0；
保证金：0；
}
.集装箱{
身高：100%；
宽度：100%；
位置：相对位置；
}
.第页{
边框：1px实心；
宽度：90%；
身高：90%；
最小高度：500px；
}
.广场{
高度：40px；
宽度：40px；
位置：相对位置；
左：50px；
顶部：10px；
背景色：#444；
光标：指针；
}
.非帆布导航{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（0,0,0,6）；
排名：0；
左：0；
不透明度：0；
z指数：-1；
过渡：全部。3秒轻松；
}
肖沃肯先生{
不透明度：1；
z指数：2；
}
mainNav先生{
列表样式类型：无；
左：20%；
顶部：50px；
位置：相对位置；
}
.mainNav>li{
利润率：30px 0px；
显示：无；
}


项目
项目
项目
项目
项目

您可以简单地使用
jQuery
和

.承诺（[type][，target]）

说明：返回承诺对象以在
绑定到集合的特定类型（已排队或未排队）已完成

Edit添加了显示事件链的第二个承诺，请在下面的代码段中尝试


$（文档）.ready（函数（）{
变量平方=$（'.square'）；
var ocn=$（'非画布导航'）；
var标志=假；
var睡眠时间=3000；
功能效应（obj，ms）{
log（“睡眠时间…”+ms/1000+“秒！”）；
//其他javascript代码。。。。
返回obj.delay（毫秒）.addClass（“sleepy”）；
}
square.click（函数（）{
ocn.addClass（'showOCN'）；
方形。removeClass（“红蓝”）；
flag=true；
console.clear（）；
日志（“已启动…”）；
$.when（effect（$（this），sleeptime））.done（function（）{
console.log（“唤醒！\n图像启动”）；
$（“.mainNav li”）。每个（功能（i）{
美元（此）.delay（300*i）.fadeIn（1000）；
}).promise（）.done（函数（））{
//将剩下的javascript代码放在这里
//例如。
ocn.removeClass（'showOCN'）；
$（this.hide（）；
square.delay（2000）.addClass（“红色”）.promise（）.done（函数（）{
平方延迟（2000年）。增加等级（“蓝色”）；
console.log（“变成蓝色！\n第二次承诺完成！”）；
flag=false；
});
log（“动画结束。\n第一次承诺完成\n变成红色！”）；
});
});
});
});
*{
填充：0；
保证金：0；
}
.集装箱{
身高：100%；
宽度：100%；
位置：相对位置；
}
.第页{
边框：1px实心；
宽度：90%；
身高：90%；
最小高度：500px；
}
.广场{
高度：40px；
宽度：40px；
位置：相对位置；
左：50px；
顶部：10px；
背景色：#444；
光标：指针；
}
瑞德先生{
背景色：#f00；
}
蓝先生{
背景色：#00f；
}
.非帆布导航{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（0,0,0,6）；
排名：0；
左：0；
不透明度：0；
z指数：-1；
过渡：全部。8秒轻松；
}
肖沃肯先生{
不透明度：1；
z指数：2；
}
mainNav先生{
列表样式类型：无；
左：20%；
顶部：50px；
位置：相对位置；
}
.mainNav>li{
利润率：30px 0px；
显示：无；
}


项目
项目
项目
项目
项目

这太完美了，非常感谢！我可以问一个后续问题吗？所以我要添加一个关闭按钮，可以关闭屏幕，如果用户单击任何不是链接的东西，关闭按钮可以