jQuery зацикливание .fadeIn и .fadeOut из тегов p внутри div по одному
Код ниже успешно исчезает в одном свидетельстве в течение 6 секунд, ждет 3 секунды, а затем затухает и переходит к следующему. Как только он достигает третьего отзыва, он возвращается к первому. Это именно то, что я хочу, но на моем реальном сайте у меня есть более трех отзывов, и в будущем, возможно, добавлю еще. Я не хочу возвращаться и добавлять новую функцию каждый раз, когда добавляю новый отзыв. Я пытался какое-то время заставить это работать, используя «this» и .next (), но не получилось. Я надеюсь, что кто-то мог бы сделать это намного более эффективным, зациклив его и заставив его перейти к следующему тегу p внутри контейнера, не вызывая новую функцию каждый раз. Любая помощь приветствуется, спасибо.
Примечание: я знаю, что есть похожие вопросы, но ни один из них не был совершенно одинаковым, и ответы на них не соответствуют.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#tml-container p { display: none; }
</style>
</head>
<body>
<div id="tml-container">
<p id="one">Testimonial 1</p>
<p id="two">Testimonial 2</p>
<p id="three">Testimonial 3</p>
</div>
<script>
$(document).ready(function() {
function doFade() {
$("#one").fadeIn(6000,function() {
$("#one").fadeOut(6000).delay(3000);
setTimeout(fadeTwo,6000);
});
}
function fadeTwo() {
$("#two").fadeIn(6000,function() {
$("#two").fadeOut(6000).delay(3000);
setTimeout(fadeThree,6000);
});
}
function fadeThree() {
$("#three").fadeIn(4000,function() {
$("#three").fadeOut(6000).delay(3000);
setTimeout(doFade,6000);
});
}
doFade();
});
</script>
</body>
</html>