使用 jQuery 淡入/淡出文本

Question

有没有办法用jQuery淡入和淡出文本如下：

1. 默认隐藏所有文本
2. 在页面加载时等待 1 秒，然后淡入第一个文本（持续时间 500 毫秒）
3. 等待 500 毫秒
4. 淡出文本（持续时间 500 毫秒）
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>