繃CSS轉換

Question

我可能要對這個錯誤的方式，所以如果它是不好的做法，請說出來。

我有一個包含一個複選框和標籤的DIV。的div的風格看起來像一個按鈕，我寫的代碼，這樣，如果一個用戶點擊（或抽頭）的DIV複選框的值或狀態會選中和未選中之間切換（這不包括在下面的代碼） 。

這裏是DIV的HTML看起來像......

<div class="funkyCheckBox"> 
<label for="inputName">Label Text</label> 
<input type="checkbox" name="inputName" id="inputID" /> 
</div> 

現在，當用戶點擊或輕敲DIV我也想改變容器DIV（一個與.funkyCheckBox類）的外觀，所以它是在視覺上明顯地向用戶表明複選框狀態已經改變。我使用jQuery切換來爲DIV添加一個活動狀態（funkyCheckBoxActive類被添加或刪除到DIV）。

這裏是CSS ...

.funkyCheckBox{ 
    display:block; 
    border-radius: 1em 1em 1em 1em; 
    margin-bottom:.5em; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #eaeaea 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%,#eaeaea 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ffffff 0%,#eaeaea 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0); /* IE6-9 */ 
    padding:.5em; 
    } 

    .funkyCheckBoxActive{ 
    background: blue; 
    -webkit-transition: background-color 1000ms linear; 
    -moz-transition: background-color 1000ms linear; 
    -o-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
    } 

這裏是我的編輯jQuery代碼...

$(".funkyCheckBox").live("click, tap", function(){ 
    $(this).toggleClass("funkyCheckBoxActive"); 

}); 

當用戶點擊.funkyCheckBox的div新類中加入一個不錯的CSS過渡的一個。當我再次單擊時.funkyCheckBoxActive類被刪除，但我希望在類被刪除而不是即時刪除時出現類似的過渡。什麼是最好的方式去做這件事。我想過爲.funkyCheckBox類增加一個類似的過渡，但我知道這不會起作用，或者達不到預期的效果。任何想法，任何人？

如果我沒有解釋我的問題也請告訴我，我將改寫。

Answer 1

你已經使用CSS3過渡爲您的活動類，但原來funkyCheckBox有簡單的背景梯度。在funkyCheckBox類中使用css轉換而不是背景漸變以獲得類似的效果。