两个类之间的状态

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>​