0

3つのdivを次々と表示しようとしています。1,2,3,1,2,3,... の順番で表示させたい..

これは私が使用しているコードです

//Initially setting the divs to be hidden
$(document).ready(function(e) {
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    myFun();
});

var x=1;


function myFun(){
switch(x)
{       
case 1:
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".1").css("visibility","visible");
    x++;
    break;

case 2:
    $(".1").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","visible");
    x++;
break;

case 3:
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","visible");
    x=1;

break;

}
//this might be wrong
$(this).delay(1000,myFun());
}

これにより、3 つの div が表示されますが、遅延はありません。遅延を与えて同じ関数を再度呼び出すにはどうすればよいですか。それを行うより良い方法はありますか。

4

5 に答える 5

2

別のアプローチ

<div class="d d1">Div1</div>
<div class="d d2">Div2</div>
<div class="d d3">Div3</div>

JS

 cycle(1);

function cycle(seqIndex) {    
  $('.d' + seqIndex).fadeIn(500, function() {
        $('.d' + seqIndex).hide();
        seqIndex = (seqIndex == $('.d').length) ? 1 : seqIndex+1
        cycle(seqIndex);            
    });
}

フィドル: http://jsfiddle.net/XUFqu/

于 2013-04-21T15:18:45.130 に答える
0

可視性の代わりに display:none を使用しないのはなぜですか?

これを試すことができますが、エレガントではありませんが、要素の可視性の連続を説明するだけです:

show() 関数を使用すると、アニメーションの終了後に実行される期間とコールバックを設定できます。

たとえば、次のような myclass をまとめて参照できるように、div に共通のクラスを指定します。

<div class="myclass 1" >1</div>
<div class="myclass 2" >2</div>
<div class="myclass 3" >3</div>

$(document).ready(function(e) {
    $(".myclass").hide(); //maybe is better to hide them by Css
    fadeInAll()
});

 var delay = 500;



   //Show each div in sequence
    function fadeInAll(){
        $(".1").show(delay,function(){
               $(".2").show(delay,function(){
                     $(".3").show(delay,function(){
                         fadeOutAll()
                    })
               })
        })
    }

   //Hide each div in sequence 
    function fadeOutAll(){
        $(".1").hide(delay,function(){
               $(".2").hide(delay,function(){
                     $(".3").hide(delay,function(){
                         //Loop again
                         fadeInAll()
                    })
               })
        })
    }

ここでこの作業例

于 2013-04-21T16:54:16.643 に答える
0

setTimeout を使用できます。

window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);
于 2013-04-21T15:10:06.780 に答える
0

これはあなたを助けることができます：

var $divs = $('div');
function foo(){
    $divs.each(function(i){
        $(this).delay(i * 500).toggle(0);
    });
    foo();
}

foo();

しかし、それは隠蔽の本当の理由によります。

于 2013-04-21T15:10:06.843 に答える