jQuery looping .fadeIn y .fadeOut de las etiquetas p dentro de div una a la vez

Question

Dec 23, 2011, 01:59 PM

jQuery looping .fadeIn y .fadeOut de las etiquetas p dentro de div una a la vez

El siguiente código se desvanece con éxito en un testimonio durante 6 segundos, espera 3 segundos y luego se desvanece y pasa al siguiente. Una vez que alcanza el tercer testimonio, vuelve al primero. Esto es exactamente lo que quiero, pero en mi sitio actual tengo más de tres testimonios y en el futuro podría estar agregando más. No quiero tener que regresar y agregar una nueva función cada vez que agrego un nuevo testimonio. Intenté durante un tiempo hacer que esto funcionara usando "this" y .next () pero fallé. Espero que alguien pueda hacer esto mucho más eficiente haciendo un bucle y haciendo que se mueva a la siguiente etiqueta p dentro del contenedor sin llamar a una nueva función cada vez. Cualquier ayuda se agradece, gracias

Nota: Sé que hay preguntas similares, pero ninguna de ellas fue la misma y las respuestas son sub par.

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