Question

有没有办法用jQuery淡化和删除文本，如下：

默认情况下隐藏所有文字
on pageload等待1s，然后淡出第一个文本（持续时间500ms）
等待500毫秒
淡出文字（持续时间500毫秒）
等待1s
重复
fadein / out循环必须是无限循环
文字的数量是动态的（可以是2或39）

HTML：

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

Answer 1

这种循环你需要等待一个任务完成才能完成下面的动画，最好用递归函数来实现。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用jQuery淡化/输出文本

2 个答案: