改變顏色和div的形狀點擊

當我點擊div時，我試圖讓div在2秒內變成綠色30x30的圓圈。然後在動畫完成運行3秒後，我想讓紅色區域回到原始狀態。改變顏色和div的形狀點擊

我的代碼，到目前爲止，我能夠點擊div和改變它的大小30×30和形狀爲圓形

這裏是我到目前爲止的代碼：

#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」，然後將背景顏色設置爲綠色.box-change類，當div被點擊時，但我仍然無法弄清楚。

我在做什麼錯？

來源

2014-10-09 gatordh7

在這一個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爲箱型固定式，IDS具有比類更高的優先級。另外，藍色框和框更改規則中的CSS背景顏色不一樣。 Ans你的顏色有3秒延遲

來源

2014-10-09 23:14:06

改變顏色和div的形狀點擊

回答

相關問題