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

Question

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

下面的link是逐个字母出现的字母。

http://jsfiddle.net/VZvK7/

感谢您的帮助！！！

Answer 1

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

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

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

Javascript to make text fade in letter by letter then fade away

javascript

fadeout

fadein