0

要素をフェードアウトしてから、次の要素を順番にフェードインしようとしています。

このコードが機能しない理由について誰かコメントできますか? 最初の要素がフェードアウトし、次の 3 つの要素が同時にフェードインします。

<p id="ptag1">
        Display this first    
</p>
<p id="ptag2" style="display:none;">
    Display this second
</p>

<p id="ptag3" style="display:none;">
    Display this third
</p>

<p id="ptag4" style="display:none;">
    Display this fourth
</p>


<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<script type="text/javascript">

    var numberoflines = 5;
    var o;

    $(document).ready(function () {

        for (i=1; i < numberoflines; i++)
        {
            fadeoutelement(i);
            o = i + 1
            fadeinelement(o);
        }


    });


    function fadeoutelement(i) {
       setTimeout("$('#ptag" + i + "').fadeOut(500)", 700); 
    }


    function fadeinelement(o) {
       setTimeout("$('#ptag" + o + "').fadeIn(500)", 1200);
    }

</script>
4

2 に答える 2

3

最初の要素がフェードインする前に 2 番目の要素を待機させたい場合は、複数の要素を持つキューを使用すると効果があるように思えます。FxQueues jQuery プラグインをチェックしてください https://github.com/lucianopanaro/jQuery-FxQueues

使用方法については、サンプル コードを確認してください: https://github.com/lucianopanaro/jQuery-FxQueues/blob/master/example.html

$("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"});

またはあなたのケースで

 $("ptag1").fadeOut({duration: 500, queue: "global"});
 $("ptag2").fadeIn({duration: 500, queue: "global"});
 $("ptag2").fadeOut({duration: 500, queue: "global"});
 $("ptag3").fadeIn({duration: 500, queue: "global"});
于 2012-10-11T18:11:58.270 に答える
2

ドキュメントは時間 T=0 で準備ができていると考えてください。そのため、forループが呼び出されます。forループ自体の実行時間はごくわずかであるため、ループの実行中は T=0 に固定されていると想定できforます。fadeoutelement()次に、T=0+700 で実行するようにスケジュールしfadeinelement()、T=0+1200 で の 3 つのインスタンスをスケジュールします。したがって、後者の 3 つの関数呼び出しは本質的に同時です。

あなたが望むのは、次のようなものです（作業コード）：

var numberoflines = 5;
$(document).ready(function () {
    var time = 0;
    for (i=1; i < numberoflines; i++){
        setTimeout("$('#ptag" + i + "').fadeOut(500)", time+700); 
        setTimeout("$('#ptag" + (i+1) + "').fadeIn(500)", time+1200);
        time += 1200; 
    }
});
于 2012-10-11T18:21:44.060 に答える