Question

到目前为止，jQuery崩溃课程都很好，但是：

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

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

这种方法很好但是当我添加一个＆＃34;更改为蓝色＆＃34;指令（.css("color", "blue")）作为链中的最后一个链接，单击按钮而不是其他事件后，文本变为蓝色。我错过了什么？

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

Answer 1

试试这个：

$("#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>

这使用callback，因此#p1仅在动画完成后变为蓝色

Answer 2

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

在您的特定情况下，slideUp和slideDown函数的调用需要一些时间才能完成（因为它们具有动画特性），但是jQuery不会等到它们完成后再进一步调用（链接）方法

您需要传递回调：

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

请参阅Fiddle

jQuery链接顺序

2 个答案: