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中提供了解决方案。

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