jquery - .delay() 在更改背景颜色时不起作用

Question

我只是在学习 JQUERY，我一直在玩 delay() 我写了一个小提琴给你看......我想做的是当一个按钮被点击时，改变 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);
});

Answer 2

您可以在此处使用队列延迟

  $(".animation").css("background","blue").delay(700)
         .queue(function() {
            $(this).css("background", "red").dequeue();
   });

将上面的代码段包裹在点击处理程序中。

Answer 3

<div id="lock"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#lock').prepend('<tr><td>hello</td><td>cool</td><td>dad</td></tr>');
        $("#lock tr").css('background-color','yellow');
    $("#lock tr")
    .delay(4000)
    .queue(function() {
        $(this).css("background-color","red").dequeue();
    })
    .fadeIn();

});

</script>

试试这个。