输入动画文字

我有DIV标签里面有文字。是否可以通过输入效果来改变循环中的文本内容，在哪里输入，然后向后删除字母，并用新文本开始全部？这可能与jQuery的？输入动画文字

2013-02-21 Erik

是的，可以肯定的。 – BenM 2013-02-21 23:17:17

看看这个插件http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html – Jurudocs 2013-02-21 23:19:12

这个问题可能会有帮助：http://stackoverflow.com/q/14861144/417685 – Alexander 2013-02-21 23:25:51

只是一个简单的方法：

$("[data-typer]").attr("data-typer", function(i, txt) { 
 

 
    var $typer = $(this), 
 
    tot = txt.length, 
 
    pauseMax = 300, 
 
    pauseMin = 60, 
 
    ch = 0; 
 

 
    (function typeIt() { 
 
    if (ch > tot) return; 
 
    $typer.text(txt.substring(0, ch++)); 
 
    setTimeout(typeIt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); 
 
    }()); 
 

 
});

/* PULSATING CARET */ 
 
[data-typer]:after { 
 
    content:""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width:1px; 
 
    height:1em; 
 
    background: #000; 
 
      animation: caretPulsate 1s linear infinite; 
 
    -webkit-animation: caretPulsate 1s linear infinite; 
 
} 
 
@keyframes caretPulsate { 
 
    0% {opacity:1;} 
 
    50% {opacity:1;} 
 
    60% {opacity:0;} 
 
    100% {opacity:0;} 
 
} 
 
@-webkit-keyframes caretPulsate { 
 
    0% {opacity:1;} 
 
    50% {opacity:1;} 
 
    60% {opacity:0;} 
 
    100% {opacity:0;} 
 
}

<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span> 
 
<h3 data-typer="This is another typing animated text"></h3> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

所以基本上jQuery的获取你的元素的data-text，通过字符插入字符，脉动“插入符号”是没有用CSS3动画:after该SPAN的元素。

另请参阅：Generate random number between two numbers in JavaScript

来源

2013-02-21 23:20:38

一些人们称*延迟* – Alexander 2013-02-21 23:24:02

@亚历山大......我们是人？ ;）哈哈开玩笑，我借用了音频工程术语 – 2013-02-21 23:24:25

如果将$（'。writer'）'先缓存到变量中，这将会更加高效。 'var $ writer = $（'。writer'）;' – chrisM 2014-04-29 14:43:32

jquery的text（）方法允许您设置元素的文本。

http://api.jquery.com/text/

你将能够使用这个通过调用这个在一个循环中，给它，你想在每帧中看到的内容，动画内容。

变种帧= [“T _”，“ty_”，“typ_”，“type_”]

// loop over frames ... inner part reads frame and prints it 
// use setInterval, etc. 
$('#my-div').text(frames[i]);

我已经通过拆分文本元素和操作，但我觉得做人物更复杂的事情在你的情况下，这将是矫枉过正。

来源

2013-02-21 23:20:36 dnewcome

输入动画文字

回答

相关问题