2

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

4

3 回答 3

4

使用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");

在这里摆弄

于 2013-05-17T07:39:41.327 回答
1

尝试使用 setTimeout 和回调函数

于 2013-05-17T07:32:51.323 回答
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 风格,我会留给专家。

于 2013-05-17T07:34:27.183 回答