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中，我尝试了包括：＆＃34;转换：background-color .5s ease-in＆＃34;，然后在.box-change类I上将background-color设置为绿色单击div时切换，但我仍然无法解决这个问题。

我做错了什么？

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背景颜色在蓝框和框更改规则中不相同。答案你有3秒的颜色延迟

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

1 个答案: