Question

我试图在屏幕上有节奏地向用户显示几个单词（一个接一个） - 就像你的普通＆＃34; Boom Booom Bap，沉默＆＃34;击败，然后再重复一次。

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

我提出了一个非常蹩脚的代码，它具有简单的节奏，并且不知道如何使（沉默）部分/划分单词：

＆＃13;

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);
	
	
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

非常感谢任何帮助！

Answer 1

您可以通过有条件地设置超时来完成此操作。

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

Answer 2

正如Prome Nabid所提到的，最简单的解决方案是用空字符串元素填补空白。

相反，你也可以在一个元素中加入更多单词，以获得更快的节拍文字。

＆＃13;

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);
	
	
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

你也可以用一个单词替换空字符串，以保持该单词超过1＆＃34; beat＆＃34;在你的循环中。

Answer 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>

使用jQuery进行文本动画

3 个答案: