輸入動畫文字

我有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

輸入動畫文字

回答

相關問題