虽然 Pablo Martinez 的回答向您展示了如何以编程方式修改延迟，但答案是有缺陷的：这样做意味着我们正在超时每个动画（jQuery 可能在内部使用 setTimeout 或类似的），并且由于由于 JavaScript 引擎的工作方式，动画可能会重叠，因为超时不会在指定时间精确执行，只是大约执行。如果您尝试在每个动画的结尾或开头触发事件，您可能会发现事件不会按预期的顺序触发（这是事实，但我不想举个例子来证明这一点）。
为了保证动画连续触发，你应该使用.animate方法返回的promise来顺序运行动画，这将保证100%的动画连续运行并且永不重叠.
以下代码未经测试，其技术在this answer 中进行了简要说明（注意，该答案也显示了使用延迟的错误方式），实际上是相同的，但没有延迟时间近似：
const elems = $('.animateThis')
setTimeout(function() {
panelIn(0)
.then(() => panelIn(1)) // arrow function syntax
.then(() => panelIn(2))
.then(() => panelIn(3))
.then(() => panelIn(4))
.then(() => panelIn(5))
.then(() => panelIn(6))
.then(() => panelIn(7))
}, 500)
function panelIn(divNumber) {
const neww = '100%'
// return a promise (learn what promises are, they are useful!)
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
如果你在一个支持异步函数的 ES6 JavaScript 环境中，你可以让代码更简洁：
async function sleep() {
return new Promise(function(resolve) {
return setTimeout(resolve, duration)
})
}
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
// Fire each animation sequentially. The `await` keyword makes the engine wait for the given promise to be resolved.
await sleep(500)
await panelIn(0)
await panelIn(1)
await panelIn(2)
await panelIn(3)
await panelIn(4)
await panelIn(5)
await panelIn(6)
await panelIn(7)
}
animateDivs()
进一步缩短它，使用 sleep 的箭头函数和一个 for 循环：
const sleep = duration => new Promise(r => setTimeout(r, duration))
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
await sleep(500)
for (let i=0; i<8; i++)
await panelIn(i)
}
animateDivs()
奖励：如果你想在所有动画完成后做点什么，只需编写另一个异步函数！
const sleep = duration => new Promise(r => setTimeout(r, duration))
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
await sleep(500)
for (let i=0; i<8; i++)
await panelIn(i)
}
async function animateDivsThenDoStuff() {
await animateDivs()
console.log('All animations complete!')
}
animateDivsThenDoStuff()