Javascript使文本逐个字母淡入淡出然后消失

Question

我正在创建一个网站，进入该网站后，我希望一个句子逐个字母地淡入淡出，并在设定的时间段后作为整个句子淡出。我有一些代码可以使字母逐个字母地显示，但我需要它们“淡入”而不是仅仅出现。然后，一旦显示整个句子，它就会立即消失并且不再重复。我还需要用 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);    
});

下面的链接是逐个字母出现的字母。

http://jsfiddle.net/VZvK7/

感谢您的帮助!!!

Answer 1

为了使字母看起来淡入或淡出，您需要更改字母的不透明度。这个问题已经有答案了How to do fade-in and fade-out with JavaScript and CSS他甚至在 vanilla JS 中提供了一个解决方案。

您会发现代码的主要思想是，当我们准备显示字母时，我们设置了一个非常低的初始不透明度级别，然后以一定的时间间隔逐渐增加不透明度。