显示文字，线条与动画

Question

搜索完网页后，尽我所能，我现在问你。

我有一个案例，我需要提供一些文本，并带有很好的动画。

就像在这个jsfiddle中一样，动画很不错，但它不会换行。

http://jsfiddle.net/Supremacy2k/nedemkgf/

HTML：

<div id="text"> 
<span> 
    In Legends of Old, a great tale of bravery is told.<br> 
    About a young warrior, and an unspeakable evil.<br> 
</span> 
</div> 

JS：

var spanWidth = $('#text span').width(); 
$('#text').animate({ 
width: spanWidth 
}, 3000); 

所以我一直在Google上搜寻，发现这一点：

http://jsfiddle.net/Supremacy2k/bzBzL/176/

HTML：

<div class="box"> 
<div id="title"><span id="name">Lore</span> Says:</div> 
<div id="message"></div> 
</div> 

JS：

var timer, fullText, currentOffset, onComplete, wordSet; 

function Speak(person, text, callback) { 
    $("#name").html(person); 
    fullText = text; 
    wordSet = text.split(" "); 
    currentOffset = 0; 
    onComplete = callback; 
    timer = setInterval(onTick, 300); 
} 

function onTick() { 
    currentOffset++; 
    if (currentOffset == wordSet.length) { 
     complete(); 
     return; 
    } 
    var text = ""; 
    for(var i = 0; i < currentOffset; i++){ 
    text += wordSet[i] + " "; 
    } 
    text.trim(); 
    $("#message").html(text); 
} 

function complete() { 
    clearInterval(timer); 
    timer = null; 
    $("#message").html(fullText); 
    if (onComplete) onComplete(); 
} 

$(".box").click(function() { 
    complete(); 
}); 

var lore = ` 
    In Legends of Old, a great tale of bravery is told.<br /> 
    About a young warrior, and an unspeakable evil.<br /> 
`; 

Speak("Lore", lore); 

那一个呢荣誉换行，但它没有动画。

有人可以指出我正确的方向，如何结合这两个，所以它看起来像第一个jsfiddle，但荣誉换行符？

• 关心克里斯。

Answer 1

我结束了，微调我已经有了什么，这是结果，对于任何其他人，谁可能需要这样的事情。

var lore = { 
 
    book1: { 
 
     chapter1: { 
 
     header: "Prologue", 
 
     content: "In Legends of Old, a great tale of bravery is told. About a young adventurer and a great evil engulfing the land.. BREAK. This tale begins on a wet, windy night...", 
 
     watched: 0, 
 
     }, 
 
    }, 
 
    book2: "some more lore!", 
 
    show: function(b, c) { 
 
     var loreheader = lore[b][c].header; 
 
     var loretxt = lore[b][c].content; 
 
     $("#lore_head").html(loreheader); 
 
     loretxt = loretxt.replace(". ", ".. "); 
 
     var arr = loretxt.split(". "); 
 
     var timer2 = 0; 
 
     var timerAdd; 
 

 
     for (var i = 0; i < arr.length; i++) { 
 
     var num = i; 
 
     var targetNum = i + 1; 
 
     var target = 'span#line' + num; 
 
     var line = arr[num]; 
 
     timer = 4000; 
 
     timer2 += 500; 
 
     if(line.length < 6) { 
 
      timer = 50; 
 
      line = " "; 
 
      timerAdd = 50; 
 
     } else { 
 
      timerAdd = timer; 
 
     } 
 
     lore.animate(num, targetNum, target, timer, timer2, line); 
 
     timer2 += timerAdd; 
 
     } 
 
    }, 
 
    animate: function(num, targetNum, target, timer, timer2, text) { 
 
     var textspan = '<span id=\"line' + num + '\">' + text + '</span><br />'; 
 
     setTimeout(function() { 
 
     $("div#lore_content").append($.trim(textspan)); 
 
     var testWidth = $(target).width(); 
 
     $(target).animate({ 
 
      width: testWidth 
 
     }, timer, "linear"); 
 
     }, timer2); 
 
    } 
 
    }; 
 
    
 
    lore.show("book1","chapter1");

div#lore_content span { 
 
    width: 0px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lore_head"></div> 
 
<div id="lore_content"></div>

Answer 2

的javascript：

var storyHTML= 
    "In Legends of Old, a great tale of bravery is told.<br>"+ 
    "About a young warrior, and an unspeakable evil.<br>"; 
function tellStory(storyDivId,storyHTML) { 
    var storyDiv=document.getElementById(storyDivId); 
    var storyArray=storyHTML.split("<br>").join("*<br>*").split(" ").join("* *").split("*") 
    var atWord=0; 
    var id=setInterval(speak, 100); 
    function speak() { 
    if(atWord<storyArray.length) { 
     storyDiv.innerHTML+=storyArray[atWord]; 
     atWord++ 
    } else { 
     clearInterval(id); 
    } 
    } 
} 

HTML：

<div id="storyDiv"></div> 

在JavaScript中使用：

• tellStory("storyDiv",storyHTML)。
• tellStory("storyDiv","In Legends of Old, a great tale of bravery is told.<br>"+ "About a young warrior, and an unspeakable evil.<br>")。

Answer 3

CSS：

div.line { 
    width: 0px; 
    white-space: nowrap; 
    overflow: hidden; 
} 

HTML：

<div id="story"> 
    <div class="line">In Legends of Old, a great tale of bravery is told.</div> 
    <div class="line">About a young warrior, and an unspeakable evil.</div> 
    <div class="line">In Legends of Old, a great tale of bravery is told.</div> 
    <div class="line">About a young warrior, and an unspeakable evil.</div> 
    <div class="line">In Legends of Old, a great tale of bravery is told.</div> 
    <div class="line">About a young warrior, and an unspeakable evil.</div> 
</div> 

的javascript：

function animate(divId) { 
    var div=document.getElementById(divId); 
    var lineCount=div.children.length; 
    var lineNumber=0; 
    var width=10; 
    var id; 
    if(lineNumber<lineCount) { 
    line=div.children[lineNumber]; 
    id=setInterval(speak, 20); 
    }; 
    function speak() { 
    if(width>=100) { 
     clearInterval(id); 
     lineNumber++; 
     if(lineNumber<lineCount) { 
     line=div.children[lineNumber]; 
     width=10; 
     id=setInterval(speak, 20); 
     }; 
    } else { 
     width++; 
     line.style.width=width+'%'; 
    } 
    } 
} 

开始与动画：

animate("story"); 

希望这样更好。我看着你的小提琴...