Как показать элементы в Succesion, скрыть их, а затем повторить в jQuery

Я хочу, чтобы три строки текста появлялись последовательно, затем скрывались, а затем снова появлялись последовательно. До сих пор мне удавалось разбивать строки на теги 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/

3 2
javascript loops css jquery show-hide

3 ответа:

Использование 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");

Скрипка здесь

4

Попробуйте сделать это с помощью функции setTimeout и callback

1
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, я оставлю это экспертам.

1