Mostrar una oración, un carácter a la vez

Quiero mostrar una oración de un carácter a la vez, uno por uno, con jQuery. ¿Existe un complemento que pueda hacer esto o cómo podría obtener este efecto?

preguntado el 08 de noviembre de 11 a las 16:11

6 Respuestas

Podrías escribir un pequeño complemento para hacerlo. Aquí hay algo para que comiences (lejos de ser perfecto, ¡solo para darte una idea!):

(function($) {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 100);
    };

})(jQuery);

Puedes llamarlo así:

$("#element").writeText("This is some text");

Aquí hay una ejemplo de trabajo.

respondido 08 nov., 11:20

Tenga en cuenta que la solución nunca borra el intervalo. Si lo usa varias veces, terminará con muchos intervalos corriendo sin hacer nada. - Eneko Alonso

Eche un vistazo al complemento TickerType: http://www.hungry-media.com/code/jQuery/tickerType/

respondido 08 nov., 11:20

El sitio al que hizo referencia* usa jQuery Ticker, que se puede encontrar en línea en http://www.jquerynewsticker.com/

También es relativamente sencillo de implementar:

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul>
</div>

Con el siguiente jQuery / JavaScript:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

Consulte la documentación del complemento para obtener más opciones y detalles de configuración.

* El sitio al que se hace referencia puede no aparecer en OP debido a su contenido

respondido 09 nov., 11:04

Esto convierte una cadena en una matriz y escribe un carácter a la vez.

var str = "This is a sentence".split('');

for (var i=0; i < str.length; i++) {
    console.log(str[i]);
};

http://jsfiddle.net/44xEe/1/

respondido 08 nov., 11:20

Imprime un carácter a la vez, pero sucederá tan rápido que ni siquiera lo notará. - James Allardice

var chars = $("#target").html().split(/./);
var content = "";
$.each(chars, function(index, value) { 
  content += "<span style='display:none'>"+value+"</span>"; 
});

$("#target").html(content);
$("#target span").each(function(){
  $(this).show();
});

respondido 09 nov., 11:01

Creé una pequeña biblioteca js ordenada recientemente sin dependencias que resuelve esto de manera minimalista. Verificar Sequencr.js

var stringToPrint = "Hello World!"
Sequencr.for(0, stringToPrint.length, function(i) {
  document.getElementById("output").innerHTML += stringToPrint[i];
}, 200, null);
<!--This is sequencr lib. For demonstration purposes only (don't copy this) - download the latest version from https://github.com/JSideris/Sequencr.js -->
<script type="text/javascript">
function Sequencr(){this.chain=function(n,c){Sequencr["for"].apply(this,[0,n.length,function(c){n[c].call(this)},c])},this["for"]=function(n,c,e,t,i){c>n?setTimeout(function(u){e.call(u,n),Sequencr["for"].apply(u,[n+1,c,e,t,i])},t,this):i&&i.call(this)}}var Sequencr=new Sequencr;
</script>



<div id="output"></div>

Respondido 12 ago 16, 12:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.