Question

我希望淡出一个元素然后淡入下一个系列元素。

有人可以评论为什么这段代码不起作用？它淡出第一个元素，然后同时淡化接下来的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>

Answer 1

如果你希望第二个元素在淡入之前等待第一个元素淡出，听起来你可以从使用多个元素的队列中受益。查看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"});

Answer 2

考虑到您的文档在T = 0时准备就绪，因此调用了for循环。由于for循环本身的执行时间可以忽略不计，我们可以假设在整个执行for循环时修复T = 0。现在它反过来调度fadeoutelement()以在T = 0 + 700处执行，并且在{T = 0 + 1200处调度fadeinelement()的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; 
    }
});

然后在jquery中逐行淡出许多行

2 个答案: