Javascript 单击即可更改div的颜色和形状

当我点击div时，我试图让div在2秒内变成一个30x30的绿色圆圈。然后在动画运行3秒后，我希望红色区域恢复到其原始状态

使用到目前为止的代码，我可以单击div，将其大小更改为30x30，并将其形状更改为圆形

以下是我目前的代码：

  #blue-box {
    height: 100px;
    width: 100px;
    background: blue;
    /* transition:background-color .5s ease-in; */
    transition: background-color 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, background-color 2s ease 3s;
}



 .box-change {
    background-color: green;
    border-radius: 100%;
    -webkit-transform: scale(.3, .3);
    -moz-transform: scale(.3, ,.3);
    -o-transform: scale(.3, .3);
    -ms-transform: scale(.3, .3);
        transform: scale(.3, .3);
    }

var box = $('#blue-box');
box.on('click', function(){
    box.toggleClass('box-change');
    if (box.hasClass('box-change'))
        console.log("testing123");
    else
        console.log("testing testing!");

});

对于#blue box div，我尝试包括：“transition:background color.5s ease in”，然后在单击div时切换的.box change类中将背景色设置为绿色，但我仍然无法理解这一点

我做错了什么？

修复了这个问题

如果您将id用于框，则id的优先级高于类。此外，css背景颜色在蓝框和框内更改规则中也不相同。你的颜色延迟了3秒

var box = $('.blue-box');
box.on('click', function(){
    box.toggleClass('box-change');
    if (box.hasClass('box-change'))
        console.log("testing123");
    else
        console.log("testing testing!");

});