jQuery链序

Question

到目前为止，做jQuery速成班还不错，但是：

        $(document).ready(function(){
            $("button").click(function(){
                $("#p1").css("color", "red")
                        .slideUp(2000)
                        .slideDown(2000);
            });
        });

<p id="p1">jQuery is fun!!</p>

这很好，但是当我添加一个“更改到蓝色”指令(.css("color", "blue"))作为链中的最后一个链接时，当我单击按钮而不是在其他事件之后，文本就会变成蓝色。我遗漏了什么？

$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000)
    .css("color", "blue");

Answer 1

链接本身并不保证执行的顺序，它只返回前面的jQuery上下文，以便您能够以一种流畅的方式进一步使用它。

在您的具体情况下，slideUp和slideDown函数的调用需要时间(因为它们的动画性质)，但是jQuery不会等到它们完成之后再调用进一步(链式)方法。

您需要传递一个回调：

$("#p1")
    .css("color", "red")
    .slideUp(2000, function() {
        $(this).slideDown(2000, function() {
            $(this).css("color", "blue");
        });
    });

请参阅小提琴

Answer 2

试试这个：

​

$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000, function() {       //function()" will add a callback
        $(this).css("color", "blue");   //this code will only execute after slideDown() has completed
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Hello</p>

​

这使用了一个回调，因此#p1只在动画完成后才会变成蓝色。