单击更改div的颜色和形状

gatordh7

当我单击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 easy-in”，然后在单击div时切换的.box-change类上，将background-color设置为绿色。我仍然不知道这一点。

我究竟做错了什么？

山姆·巴特（Sam Battat）

已在此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秒

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。