CODEWITHSUNDEEP
javascriptjquery
user2376313
user2376313

Reputation: 59

jquery function to display text one character at a time

Can anyone help with this Jquery ? I am trying to create a function that accepts a variabe of text and then outputs each letter with a slight delay. here is the code i have

//example of function call
var data = "hi you there";
display_text(data);

//function to fade words in individually
function display_text(data) {

    var $words = data.split(" ");

    var html = "";
    for (var i = 0; i < words.length; i++) {
        html += "<span>" + words[i] + " </span>";
    };

    html.insertBefore("#placeholder").hide().each(function(i){
        $(this).delay(i*100).fadeIn(700);
    }
);

Upvotes: 0

Views: 5725

Answers (3)

Flavio
Flavio

Reputation: 546

Working with the example above my friend and I came up with this which allows you to feed in an array and use a callback so a message will start only when the previous one is finished. 

var message = [
{
  t: 'CLASSIFIED COMMUNICATION',
  d: 200,
  e: '#msgHeader1'
},
{
  t: 'COLONIAL FLEET',
  d: 200,
  e: '#msgHeader2'
},
{
  t: 'BY ORDER OF',
  d: 200,
  e: '#msgHeader3'
},
{
  t: 'ADMIRAL WILLIAM ADAMA',
  d: 200,
  e: '#msgHeader4'
},
{
  t: 'YOU ARE HEARBY REQUESTED AND REQUIRED TO REPORT TO COORDINATES',
  d: 100,
  e: '#msgMain1'
},
{
  t: 'N 40 28 38.078 W 111 53 15.954',
  d: 100,
  e: '#msgMain2'
},
{
  t: ' 1900 HRS',
  d: 100,
  e: '#msgMain3'
},
{
  t: 'STAR DATE 2014.02.14',
  d: 100,
  e: '#msgMain4'
},
{
  t: 'SO SAY WE ALL',
  d: 200,
  e: '#soSayWeAll'
}
];

var text;
var delay;
var elem;

var j = 0;
var run = function (i) {

text  = message[i].t;
delay = message[i].d;
elem  = message[i].e;
var teleText = function (text, elem, delay, callback) {
  if (text.length > 0) {
    $(elem).append(text[0]);
    setTimeout(
      function () {
        teleText(text.slice(1), elem, delay, callback);
      }, delay
    );
  } else if (text.length == 0) {
    console.log('finished');
    j++;
    callback();
  }
};

teleText(text, elem, delay, function () {
  run(j);
});

};

Upvotes: 0

Ghost
Ghost

Reputation: 396

Instead of using .delay of jquery you can also use javascript's setTimeout to achieve the same thing. To make it a more generalized variant you can also accept the element where the text to be shown and delay as arguments.

Here is the code.

HTML

<body>
   <div id="myText"></div>
</body>

JS

var text="This text will be written one by one.";
var delay=300;
var elem = $("#myText");
//text- string
//elem - jQuery element where text is to be attached
//delay - the delay in each text
var addTextByDelay = function(text,elem,delay){
    if(!elem){
        elem = $("body");
    }
    if(!delay){
        delay = 300;
    }
    if(text.length >0){
        //append first character 
        elem.append(text[0]);
        setTimeout(
            function(){
                //Slice text by 1 character and call function again                
                addTextByDelay(text.slice(1),elem,delay);            
             },delay                 
            );
    }
}

addTextByDelay(text,elem,delay);

I have also created a fiddle Enter Text with Delay

Upvotes: 2

adrenalin
adrenalin

Reputation: 1658

You have there syntax errors and a function call before the function has been defined. This should do the trick:

var data = "hi you there";
function display_text(data) {
  var words = data.split(" ");

  for (var i = 0; i < words.length; i++) {
    var span = $('<span />').text(words[i]).hide().appendTo('#placeholder');
  }

  $('#placeholder').find('span').each(function(i) {
    $(this).delay(i * 100).fadeIn(700);
  });
}
display_text(data);

Your variable html was also a string and it should have been wrapped like this $(html) to be using jQuery wrapping. That would have made it possible to inject the string as DOM.

The next issue was that when you applied $.each you would have worked on a single element (i.e. your html). It could have worked if it had had a .find('span') before invoking each.

Upvotes: 0

Related Questions