2

3 行のテキストが連続して表示され、非表示になり、再び連続して表示されるようにします。これまでのところ、行をタグに分割して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 
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 に答える
1

setTimeout と callback 関数でやってみてください

于 2013-05-17T07:32:51.323 に答える