为什么delay（）或queue（）jQuery对我不起作用？

Question

我尝试通过练习学习Jquery，但是Jquery的延迟存在问题。

我想用鼠标来书写铅笔，当我在div上时，我希望它改变颜色：黄色，在500毫秒后变为红色，在500毫秒后返回黑色。 只有第一部分有效。

$(document).ready(function(){
    $('.case').mouseenter(function(){
        $(this).css("background-color", "yellow").delay(500).queue(function(){
            $(this).css("background-color", "red").delay(500).queue(function(){
                $(this).css("background-color", "#000");
            });
        });
    });
});

<div class="wrap">
    <?php
        $i = 0;
        for ($i == 0; $i<50; $i++){
            $j = 0;
            for ($j == 0; $j<50; $j++){
                echo '<div class="case"></div>';
            }
        }
    ?>
</div>  

这是我的代码，可以在页面中创建很多小div

*{
    margin: 0;
    padding: 0;
}

.wrap{
    display: grid;
    grid-template-columns: repeat(50, calc(100% / 50));
    grid-auto-flow: row;
}

.case{
    width: 100%;
    height: 20px;
    background-color: #000;
    transition: all 1.5s ease;
}

这是我的CSS代码。