Problemas com mudança de textos JQuery

Boa tarde pessoal... estou fazendo alguns testes aqui... a minha ideia é mudar um texto que esta sobre uma imagem a cada 5 segundos. O que sucede é o seguinte:

a primeira legenda não aparece, a segunda aparece e trava ali e não muda mais, ja tentei solucionar o problema de todas as formas que me vieram a cabeça, aliás, estou nisso desde cedo e já nao tenho mais ideias sobre o que fazer. Se alguém puder me ajudar, agradecerei muito.


código JQuery

                               setInterval(function () {			

					

                                   if($('p').eq(0).is(':visible')){	

						$('p').eq(0).css('visibility','hidden');

						$('p').eq(1).css('visibility','visible');

						$('p').eq(2).css('visibility','hidden');

					}else if($('p').eq(1).is(':visible')){	

						$('p').eq(0).css('visibility','hidden');

						$('p').eq(1).css('visibility','hidden');

						$('p').eq(2).css('visibility','visible'); 

					}else if($('p').eq(2).is(':visible')){	

						$('p').eq(0).css('visibility','visible');

						$('p').eq(1).css('visibility','hidden');

						$('p').eq(2).css('visibility','hidden');	

					}else{

						$('p').eq(0).css('visibility','visible');

						$('p').eq(1).css('visibility','hidden');

						$('p').eq(2).css('visibility','hidden');

					}

					

				}, 5000);	



 

código HTML

                                        <div id="legenda"><p>legenda 1</p></div>

					<div id="legenda"><p>legenda 2</p></div>

					<div id="legenda"><p>legenda 3</p></div>



 

código CSS

#legenda{

	width:400px;

	background-color: rgba(0,0,0,0.6);

	height:60px;

	position: absolute;

	z-index: 1;

	top: 390px;

	line-height: 60px;

	visibility: visible;

	

	

}



p{

	color: white;

	font-family: ubuntu;

	font-weight: bold;

	font-size: 11pt;

	z-index: 3;

	padding: 0px;

	visibility: hidden;

	

}