兩個類之間的狀態

Question

我有兩個CSS類（c1和c2），我用CSS3轉換在它們之間切換。

現在，我想一個div來留（非動畫）的c1和c2之間的狀態，例如60％c1和40％c2。 （如果我玩c1和c2之間1秒持續時間的過渡，我想幀的出現在0.4秒的狀態）

c1和c2具有許多屬性（變換等），所以它是不容易計算每個屬性按要求的百分比並將其設置爲div。

有沒有用於此目的的任何CSS/jQuery方法？

Answer 1

jQueryUI的switchClass,addClass函數不支持step函數參數，這使得實現這一點非常困難。

但是，如果你能在動畫代碼本身指定的風格，這是可以做到 - 選中此琴：http://jsfiddle.net/techfoobar/fAZqn/2/

Answer 2

Here is working jsFiddle，這裏是結構：

的jQuery：

//setting animation values 
var value1 = 60; 
var value2 = 40; 

$('a').click(function(){ 
var takeClass = $(this).attr('class'); 
//takes class from clicked element 

var selectEle = $('.'+ takeClass +'Box'); 
//creating selector with takeClass value 

$('span').not(selectEle).animate({'width':value2+'px','height':value2+'px'},90); 
selectEle.animate({'width':value1+'px','height':value1+'px'},90); 
});​ 

HTML：

<a class="c1">1</a> 
<a class="c2">2</a> 
<span class="c1Box"></span> 
<span class="c2Box"></span>​