javascript - 单击时更改div的颜色和形状

Question

当我点击 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!");

});

http://jsfiddle.net/gatordh7/gxes2ep3/

对于 #blue-box div，我尝试包括:“transition:background-color .5s ease-in”，然后在 div 切换时将 .box-change 类的背景颜色设置为绿色单击，但我仍然无法弄清楚。

我做错了什么？

Answer 1

固定在这一个http://jsfiddle.net/gxes2ep3/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!");

});

您正在为框使用 id，id 的优先级高于类。此外，css background-color 在蓝框和框更改规则中也不相同。答:颜色有 3 秒的延迟