jQuery的延时功能只会延误被称为功能后链,因此它正在对你的代码没有任何影响。 Delay docs
您需要在调用fadeOut之前使用它,例如,
$(document).ready(function() {
function doFade() {
$("#one").fadeIn(6000,function() {
setTimeout(fadeTwo,6000);
})
.delay(3000)
.fadeOut(6000);
}
function fadeTwo() {
$("#two").fadeIn(6000,function() {
setTimeout(fadeThree,6000);
})
.delay(3000)
.fadeOut(6000);
}
function fadeThree() {
$("#three").fadeIn(6000,function() {
setTimeout(doFade,6000);
})
.delay(3000)
.fadeOut(6000);
}
doFade();
});
编辑:
您正在设置超时执行下一个功能,淡入的完整的回调中。这对我来说有点困惑,我认为做下面的事情更简单明了。此外,没有任何理由来定义准备功能中的三种功能 - 这是个人喜好,但我想保持一个回调到最低程度,如范围内的代码量...
$(document).ready(function() {
doFade();
});
function doFade() {
setTimeout(fadeTwo,12000);
$("#one").fadeIn(6000).delay(3000).fadeOut(6000);
}
function fadeTwo() {
setTimeout(fadeThree,12000);
$("#two").fadeIn(6000).delay(3000).fadeOut(6000);
}
function fadeThree() {
setTimeout(doFade,12000);
$("#three").fadeIn(6000).delay(3000).fadeOut(6000);
}
编辑2:
在进一步的努力减少我们重复自己的量,就可以提取出整个动画序列到一个函数:
$(document).ready(function() {
doFade();
});
function fadeInThenOut(element) {
element.fadeIn(6000).delay(3000).fadeOut(6000);
}
function doFade() {
setTimeout(fadeTwo,12000);
fadeInThenOut($("#one"));
}
function fadeTwo() {
setTimeout(fadeThree,12000);
fadeInThenOut($("#two"));
}
function fadeThree() {
setTimeout(doFade,12000);
fadeInThenOut($("#three"));
}
编辑3:
在这一点上我们可能会注意到我们的三个函数有多相似,并且想要某种方式来减少那的重复性。所以我们可以使用递归,并且每次更改我们传递的元素。
$(document).ready(function() {
doFade();
});
function doFade(elementNumber) {
const elementNumber = elementNumber < testimonialElements.length ? elementNumber : 0;
setTimeout(doFade(elementNumber + 1),12000);
$('#' + testimonialElements[elementNumber]).fadeIn(6000).delay(3000).fadeOut(6000);
}
var testimonialElements = ["one","two","three"];
虽然这种解决方案可能会失去可读性和简单的东西,伟大的好处是,当你添加第四个见证,你不需要写一个函数来处理它。你所要做的就是改变testimonialElements数组以包含新的元素id。