Quiero desvanecer el primer div de una colección y luego desvanecer en el siguiente div. El fundido de entrada se dispararía en un momento determinado. El número de artículos en la colección es de 1 a n. Aquí hay un ejemplo de html;

<div class="contentPanel">
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is first content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is second content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is third content
         </div>
      </div>
   </div>

Entonces, en la carga de la página, la primera clase de "contenido" sería visible, después de x cantidad de tiempo, el "contenido" actual se desvanecería y el siguiente "contenido" se desvanecería. Cuando llegara al enésimo "contenido" comenzaría de nuevo , desvanece el enésimo "contenido" y desvanece en el primer "contenido". Este comportamiento se repetiría continuamente.