Quero desvanecer a primeira div em uma coleção e depois desvanecer-se na próxima div. O desvanecimento gradual seria acionado em um horário definido. O número de itens na coleção é de 1 a n. Aqui está um exemplo do 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>

Assim, no carregamento da página, a primeira classe "conteúdo" ficaria visível, após x quantidade de tempo, o "conteúdo" atual desapareceria e o próximo "conteúdo" desapareceria. Quando chegasse ao enésimo "conteúdo", começaria novamente , esmaecer o enésimo "conteúdo" e esmaecer no primeiro "conteúdo". Esse comportamento seria repetido continuamente.