使用jQuery淡化/输出文本

时间:2015-05-26 18:36:56

标签: jquery

有没有办法用jQuery淡化和删除文本,如下:

  1. 默认情况下隐藏所有文字
  2. on pageload等待1s,然后淡出第一个文本(持续时间500ms)
  3. 等待500毫秒
  4. 淡出文字(持续时间500毫秒)
  5. 等待1s
  6. 重复
  7. fadein / out循环必须是无限循环
  8. 文字的数量是动态的(可以是2或39)
  9. HTML:

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

2 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

您可以创建如下的动画:

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