如何在继承中显示元素、隐藏元素，然后在jQuery中重复

Question

我希望连续显示三行文本，然后隐藏，然后再次连续显示。到目前为止，我已经能够将行分割成span标记并连续出现，但我不知道如何一次将它们全部隐藏起来，然后重复动画。

这是我的HTML：

<span class="flexi-link" id="title-1">Link 1</span>
<span class="flexi-link" id="title-2">Link 2</span>
<span class="flexi-link" id-"title-3">Link 3</span>

这是我的jQuery：

$('#title-1').delay(1000).show(0);
$('#title-2').delay(2000).show(0);
$('#title-3').delay(3000).show(0);

小提琴：http://jsfiddle.net/TtKnK/

Answer 1

使用setInterval()

尝尝这个

setInterval(function(){
  $('.flexi-link').hide();
  $('#title-1').delay(1000).show(0);
  $('#title-2').delay(2000).show(0);
  $('#title-3').delay(3000).show(0);
},"4000");

fiddle here

Answer 2

尝试使用setTimeout和回调函数

Answer 3

steps = [
    function() {$('#title-1').show(0);},
    function() {$('#title-2').show(0);},
    function() {$('#title-3').show(0);},
    function() {$('.flexi-link').hide(0);},
]

var runStep = function(n) {
    steps[n]();
}

var timedRun = function(interval, step) {
    step = step || 0;
    runStep(step);
    setTimeout(timedRun, interval, interval, (step+1)%steps.length);
}

timedRun(1000)

http://jsfiddle.net/TtKnK/17/

注意:我使用的是函数而不是DOM元素，所以基本上可以插入任何其他代码。jQuery中肯定有一些东西可以让它更具jQuery风格，我将把它留给专家。