更改<div>的背景颜色时,.delay()无效

Question

我只是在学习JQUERY而且我一直在玩延迟()我写了一个小提琴来告诉你...我想要做的是当点击一个按钮时,改变div的背景颜色然后在几分钟再次切换背景颜色.但是当我尝试它时,它只是切换到第二种颜色并跳过第一种颜色.

HTML:

<div class = "animation">


</div> 

<button id = "change"> Click </button>

这是Jquery代码:

$(document).ready(function(){
$("#change").click(function(){

    $(".animation").css("background", "blue").delay(700).css("background", "red");


    });
});

链接在这里:

的jsfiddle

Answer 1

delay 仅适用于队列中的项目(如动画).

除此之外,使用常规旧计时器:

$("#change").click(function() {
    var $el = $(".animation");

    $el.css("background", "blue");

    setTimeout(function () {
        $el.css("background", "red");
    }, 700);
});