另一个打字动画完成后如何制作打字动画

Question

我目前正在制作动画类型，但是问题通常是我很难调用一个函数，然后当它完成调用另一个函数时，我尝试了回调，但是它通常没用，我需要能够做到这一点的技术，动画和功能，请提供说明。 检查下面的代码

 $(document).ready(function(){ var i; var counter = 1; var text; function typeLike(elem,theText){ var newString = ""; text = theText; for(i = 0; i < counter; i++){ newString += text.charAt(i); } $(elem).text(newString); counter++; // if(counter > text.length){ // counter = 0; // } } function startTypeLike(elem,str) { var randomNum = Math.random()*1000; if(counter <= str.length){ var inter = setTimeout(function(){ typeLike(elem,str); startTypeLike(elem,str); },randomNum); } else{ $(elem).removeClass("animated"); } } startTypeLike(".something","hello all how you doin in this fine day"); startTypeLike(".other","sup man how you doin in this fine night"); }); // end of ready 

 body,html{ height:100%; width:100%; } *{ padding:0; margin:0; box-sizing: border-box; } .something{ font-size: 2em; font-family: monospace; } .animated::after{ content:"_"; animation: fade; animation-iteration-count: infinite; animation-duration: 1s; animation-play-state: running; } .animated{ } @keyframes fade{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <script src="jquery-3.2.1.min.js"></script> <link href="try.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="container"> <p class="something animated"></p> <p class="other animated"></p> </div> <script src="try.js"></script> </body> </html> 

Answer 1

如果您向我们展示了如何尝试实现回调功能以及失败的原因，那就太好了。 该代码通常有点混乱，但我基本上还是保留了它，只是将回调函数实现为startTypeLike()的第三个可选参数，并在第一个动画之后在所述回调中触发第二行。 您还必须在第一个动画之后重置计数器，以便下一个动画将从第一个字母开始。

编辑：您可能希望第二行闪烁的“ _”仅在键入开始后立即开始，因此我也实现了这一点。

 $(document).ready(function(){ var i; var counter = 1; var text; function typeLike(elem,theText){ var newString = ""; text = theText; for(i = 0; i < counter; i++){ newString += text.charAt(i); } $(elem).text(newString); counter++; // if(counter > text.length){ // counter = 0; // } } function startTypeLike(elem,str,callback) { var randomNum = Math.random()*1000; if(counter <= str.length){ var inter = setTimeout(function(){ typeLike(elem,str); startTypeLike(elem,str,callback); // don't forget to pass the callback function on to the recursive call },randomNum); } else{ $(elem).removeClass("animated"); counter = 0; callback && callback(); // if a callback function is set, execute it } } startTypeLike(".something","lorem ipsum", function() { $('.other').addClass('animated'); startTypeLike(".other","dolor sit amet"); }); }); // end of ready 

 body,html{ height:100%; width:100%; } *{ padding:0; margin:0; box-sizing: border-box; } .something{ font-size: 2em; font-family: monospace; } .animated::after{ content:"_"; animation: fade; animation-iteration-count: infinite; animation-duration: 1s; animation-play-state: running; } .animated{ } @keyframes fade{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <p class="something animated"></p> <p class="other"></p> </div> 

Answer 2

我不仅为键入动画的结尾添加了回调，而且还重新格式化了代码以使其更好，希望它能起作用！

 $(document).ready(function() { function typeWriter(el, text, onDone) { var part = ""; type(0); function type(i) { part += text.charAt(i++); $(el).text(part); if (i < text.length) { var randomDelay = Math.random() * 1000; setTimeout(function() { type(i); }, randomDelay); } else { if (onDone) onDone(); } } } typeWriter(".something", "hello all how you doin in this fine day", function() { typeWriter(".other", "sup man how you doin in this fine night"); }); }); // End of ready 

 body, html { height: 100%; width: 100%; } * { padding: 0; margin: 0; box-sizing: border-box; } .something { font-size: 2em; font-family: monospace; } .animated::after { content: "_"; animation: fade; animation-iteration-count: infinite; animation-duration: 1s; animation-play-state: running; } @keyframes fade { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <script src="jquery-3.2.1.min.js"></script> <link href="try.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="container"> <p class="something animated"></p> <p class="other animated"></p> </div> <script src="try.js"></script> </body> </html>