使用jQuery淡入/淡出文本

Question

有没有一种方法可以用jQuery将文本淡入和淡出：

1. 默认情况下，所有文本都是隐藏的
2. 在页面加载等待1秒钟后，然后淡入第一个文本（持续时间500毫秒）
3. 等待500毫秒
4. 淡出文本（持续时间500ms）
5. 等待1秒
6. 重复
7. 淡入/淡出周期必须是无限循环
8. 文本数是动态的（可以是2或39）

HTML：

<div id="texts">
   <span>Text 1</span>
   <span>Text 2</span>
</div>

Answer 1

使用递归函数可以最好地实现这种循环，在这种循环中您必须等待任务完成之后才能执行以下动画。

命名函数表达式在这里特别方便：

 $(function(){ var texts = $('#texts span').hide(), i = 0; (function step(){ i = (i+1)%texts.length; texts.eq(i).fadeIn(500, function(){ texts.eq(i).fadeOut(500, step) }); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="texts"> <span>Text 1</span> <span>Text 2</span> </div> 

Answer 2

您可以创建如下动画：

 @keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation 1s infinite; -moz-animation: flickerAnimation 1s infinite; -o-animation: flickerAnimation 1s infinite; animation: flickerAnimation 1s infinite; } 

 <div class="animate-flicker">Loading...</div>