使用 jQuery 的文本动画答案

【问题标题】：Text animation with jQuery使用 jQuery 的文本动画
【发布时间】：2016-09-23 20:45:29
【问题描述】：

我正在尝试在屏幕上有节奏地（一个接一个地）向用户显示几个词 - 就像您的平均“Boom Booom Bap，沉默”节拍一样，然后再次重复。

我将如何使用 jQuery 实现这样的目标？

我想出了一个非常蹩脚的代码，节奏平淡，不知道如何制作（静音）部分/分割单词：

jQuery( document ).ready(function() {		
				
	var textlist = ["Boom","Booom", "Bap", "Hey","Yoh", "Aha", "Namean","Brooklyn", "Pizza"];
	
	var timer;
	function textFade(index){
		$("#container").html(textlist[index]).fadeIn(200);
		index++;
		timer = setTimeout(function() {
			textFade(index % textlist.length);
		}, 1500);
	}
			
	
	textFade(0);
	
	
});

body{font-size: 90px;}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #eee;
font-family: 36px;
color: #333;
text-align: center;
display: none;
padding-top: 20px;
font-family: Arial;
}

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

<div id="container"></div>

非常感谢任何帮助！

【问题讨论】：

使用空字符串，如["Boom","Booom", "Bap", "", "Hey","Yoh", "Aha", "", "Namean","Brooklyn", "Pizza", ""]

标签： jquery animation text

【解决方案1】：

您可以通过有条件地设置超时来做到这一点。

timer = setTimeout(function() {
        textFade(index % textlist.length);
    }, (index%3==0)?2000:700);

【讨论】：

【解决方案2】：

就像 Prome Nabid 提到的那样，最简单的解决方案是用空字符串元素填补空白。

反之，您也可以在一个元素中放入更多单词以获得更快的节拍文本。

jQuery( document ).ready(function() {		
				
	var textlist = ["Boom","Booom", "Bap", "", "", "", "Hey","Yoh", "The sound of my", "heart", "Namean","Brooklyn", "Pizza", ""];
	
	var timer;
	function textFade(index){
		$("#container").html(textlist[index]).fadeIn(200);
		index++;
		timer = setTimeout(function() {
			textFade(index % textlist.length);
		}, 1500);
	}
			
	
	textFade(0);
	
	
});

body{font-size: 90px;}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #eee;
font-family: 36px;
color: #333;
text-align: center;
display: none;
padding-top: 20px;
font-family: Arial;
}

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

<div id="container"></div>

您还可以用一个单词替换空字符串，以使该单词在循环中保持超过 1 个“节拍”。

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function() {
     
     var textlist = ["Boom","Booom", "Bap","","Hey","Yoh", "Aha", "Namean","Brooklyn", "Pizza"];
     
     var timer;
     
     function textFade(index){
         $("#container").html(textlist[index]).fadeIn(200);
         index++;
         timer = setTimeout(function() {
             textFade(index % textlist.length);
             }, (index===4) ? 4500 : 1500);
     }
			
	textFade(0);

 })

 body {
   font-size: 90px;
 }
#container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  font-family: 36px;
  color: #333;
  text-align: center;
  display: none;
  padding-top: 20px;
  font-family: Arial;
}

<div id="container"></div>
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

【讨论】：