Question

我今天开始学习jQuery而且我遇到了一个问题，我的印象是你在jQuery中编写代码的顺序是它执行它的顺序，显然我错了。例如，我想告诉它将我的文字设为蓝色，然后将其更改为红色。我无法让它工作，因为它似乎为元素而战（我的猜测是它在同一时间运行所有函数），即使我延迟了。关于这个的任何想法？

这是我的代码：http://jsfiddle.net/jZUzP/

$(document).ready(function(){
    $(".post").css({"color":"#0000FF"})
              .delay(800)
              .css({"color":"##FF0000"});    
});

Answer 1

一般而言，jQuery代码按其显示的顺序执行，与任何其他JavaScript代码相同。但是，使用setTimeout()或Ajax的函数可能会在延迟后执行某些操作。

对于您问题中的代码，您使用的是.delay() method，这只会向jQuery animation effects添加延迟，而.css()方法不会参与动画。正如费利克斯的评论中所指出的那样，两个css的变化会在彼此之后立即发生，速度太快而无法看到第一种颜色。

更具体地说，您的第一个.css()调用发生了，然后.delay()调用发生了，但它的作用是向动画队列添加延迟然后立即返回，然后是您的第二个.css()呼叫发生。如果你排队等其他动画效果，他们会在延迟后发生。浏览器在单个线程中运行JavaScript，因此您不会同时运行两个代码块 - 并注意该单个线程也是浏览器用于呈现的线程（这就是长时间运行循环的原因）使浏览器无响应。）

所以，您可能会自然地问，是否有办法以参与jQuery动画制作过程的方式更改css设置？是的，您可以使用.animate()方法 - 除了它不会处理颜色。至少，不是默认情况下。但是，如果您将jQuery UI扩展名包含到jQuery 然后，则可以使用.animate()更改颜色，如下所示：

$(document).ready(function() {
    $(".post").animate({
        "color": "#0000FF"
    }, 0).delay(800).animate({
        "color": "##FF0000"
    }, 0);
});

演示：http://jsfiddle.net/jZUzP/1/

请注意，以上称为.animate()的持续时间为0，以便颜色变化是即时的。

进一步阅读：

如果你不想仅仅为了这样简单的东西包含jQuery UI和jQuery，你当然可以使用（非jQuery，标准JS）setTimeout() function来排队你的第二个css改变：

$(document).ready(function(){
    var $post = $(".post").css({"color":"#0000FF"});
    setTimeout(function() {
        $post.css({"color":"##FF0000"});
    }, 800);
});

（jQuery动画效果在内部使用setTimeout()。）

如何告诉jQuery执行函数的顺序

1 个答案: