Estoy intentando hacer que un texto cambie de valor con una transición, el texto se me cambia, pero lo que no sé es cómo hacer la transición, lo he intentado de muchas maneras pero no me sale. Esta es la función:
function rotar() {
var indice = 0;
frases = new Array();
frases[0] = "Frase 1";
frases[1] = "Frase 2";
frases[2] = "Frase 3";
frases[3] = "Frase 4";
indice = Math.random()*(frases.length);
indice = Math.floor(indice);
if (indice == frases.length) {
indice = 0;
}
$("#frase-celebre").html(frases[indice]);//Esta es la frase que quiero que haga transición
indice++;
setTimeout("rotar();", 5000);
}
Este es el HTML:
<p id="frase-celebre">“Lo más magnífico de las fotografías es que pueden producir imágenes que incitan la emoción basadas en un único tema”.</p>
Lo he intentado muchas veces con algo parecido a esto:
$("#frase-celebre").html(frases[indice]).fadeOut( "slow" )
pero nada... Muchas gracias por la ayuda!!