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

FIDDLE：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-esque，我会把它留给专家。

如何连续显示元素，隐藏它们，然后在jQuery中重复

3 个答案: