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

如果您希望第二个元素在第一个元素淡入之前等待它淡出，听起来您会从使用具有多个元素的队列中受益。查看 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循环本身的执行时间可以忽略不计，我们可以假设在整个for循环执行期间 T=0 是固定的。现在它又安排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 回答