1

I am creating a website and upon entering the site I want a sentence to fade in letter by letter and after a set period of time, fade away as an entire sentence. I have some code that makes the letters appear letter by letter but I need them to "fade in" rather then just appearing. Then once the entire sentence is displayed it will all fade away at once and not repeat. I will also need to reference this with CSS.

var showText = function (target, message, index, interval) {    
  if (index < message.length) { 
    $(target).append(message[index++]); 
    setTimeout(function () { showText(target, message, index, interval); }, interval); 
  } 
}

$(function () { 
   showText("#msg", "Hello, World!", 0, 500);    
});

The link below is to the letters appearing letter by letter.

http://jsfiddle.net/VZvK7/

Thank you for any help!!!

jq170727
  • 13,159
  • 3
  • 46
  • 56
BeSafer
  • 27
  • 7

1 Answers1

0

In order to make the letters appear to fade in or out you need to change the opacity of the letter. There is already an answer to this question at How to do fade-in and fade-out with JavaScript and CSS where he even provides a solution in vanilla JS.

The main idea of the code you will find is that we set an initial opacity level which is quite low when we are ready to show the letter and then you incrementally increase the opacity at certain intervals.

Hassan Mahmud
  • 484
  • 4
  • 13