1

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

1 respuesta 1

1

Aquí te dejo un ejemplo donde funciona la funcion $.fadeOut("slow") bajo las condiciones que solicitabas.

$('body').on("click","#frase-celebre",function(){
rotar();
}) 
    
    function rotar(){
            var indice = 0;
        frases = new Array();
        frases[0] = "Cerrando 1...";
        frases[1] = "Cerrando 2...";
        frases[2] = "Cerrando 3...";
        frases[3] = "Cerrando 4...";

        indice = Math.random()*(frases.length);
        indice = Math.floor(indice);

        if (indice == frases.length) {
            indice = 0;
        }
        $("#frase-celebre").html(frases[indice]).fadeOut("slow");
        indice++;
        setTimeout('rotar()', 5000);
}
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">      </script>
    </head>
    <body>
<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>
    </body>
</html>

4
  • Ya he editado la pregunta con el HTML. Sí sí, están todas las librerías incluidas.
    – Csc99
    Commented el 22 ago. 2018 a las 11:39
  • Esto es un comentario, no una respuesta
    – CristianS9
    Commented el 22 ago. 2018 a las 11:39
  • No puedo comentar debido a mi reputación @CristianS9
    – jld
    Commented el 22 ago. 2018 a las 11:40
  • @Csc99 ahí tienes el ejemplo funcionando. Espero haberte ayudado.
    – jld
    Commented el 22 ago. 2018 a las 11:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.