如何在 jQuery 中连续显示、隐藏和重复元素答案

【问题标题】：How to Show Elements in Succesion, Hide Them, and Then Repeat in jQuery如何在 jQuery 中连续显示、隐藏和重复元素
【发布时间】：2013-05-12 07:16:22
【问题描述】：

我想让三行文字连续出现，然后隐藏，然后又连续出现。到目前为止，我已经能够将线条分割成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/

【问题讨论】：

标签： javascript jquery css loops show-hide

【解决方案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

【讨论】：

@DannyCooper 是的...我也发布了链接，因此您可以阅读有关 setInterval 的更多信息...。我创建了这个以帮助您继续...您可以根据需要调整持续时间... :)
有没有办法让它一开始就立即启动，并且只在第二个循环和之后等待 4000 毫秒？

【解决方案2】：

尝试使用 setTimeout 和回调函数来实现

【讨论】：

我对这些都不熟悉。我对 jQuery 很陌生。你有例子吗？
全部隐藏：$('#title-3').delay(3000).show(0, function(){$('#title-3').hide(); $('#title-2').hide();$('#title-1').hide();});

【解决方案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 风格，我会留给专家。

【讨论】：

这只是隐藏第一行，不会循环其他任何内容。
对不起，错误的链接（已修复），但代码是正确的（只是一个错字，hdie 而不是 hide）
可能我没解释清楚：链接都相继出现后，能不能一下子全部隐藏，然后又相继出现？
是的，只需将 steps 数组更改为您想要运行的任何效果：jsfiddle.net/Dekku/TtKnK/18
在您的帮助下，我自己想出了确切的解决方案。完美的！谢谢。