jQuery loop .fadeIn e .fadeOut das tags p dentro de div, uma de cada vez

Question

Dec 23, 2011, 01:59 PM

jQuery loop .fadeIn e .fadeOut das tags p dentro de div, uma de cada vez

O código abaixo diminui com êxito em um depoimento por 6 segundos, aguarda 3 segundos e depois diminui e passa para o próximo. Quando chega ao terceiro depoimento, volta ao primeiro. É exatamente isso que eu quero, mas no meu site atual eu tenho mais de três depoimentos e, no futuro, talvez esteja adicionando mais. Não quero voltar e adicionar uma nova função sempre que adicionar um novo depoimento. Tentei por algum tempo fazê-lo funcionar usando "this" e .next (), mas falhei. Espero que alguém possa tornar isso muito mais eficiente fazendo um loop e fazendo com que ele passe para a próxima tag p dentro do contêiner sem chamar uma nova função todas as vezes. Qualquer ajuda é apreciada, obrigado

Nota: Eu sei que existem perguntas semelhantes, mas nenhuma delas é a mesma e as respostas são inferiore

<!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>