javascript - 两个类之间的状态

Question

我有两个 CSS 类 (c1和c2)，我正在使用 CSS3 过渡在它们之间切换。

现在，我希望 div保持（不动画）在 和 之间的状态c1，c2例如 60%c1和 40% c2。c1（如果我在和之间播放持续时间为 1 秒的过渡c2，我希望帧的状态出现在 0.4 秒）

c1并且c2具有许多属性（变换等），因此不容易按所需百分比计算每个属性并将其设置为div.

有没有为此目的的 CSS/jQuery 方法？

Answer 1

jQueryUI 的switchClass函数addClass不支持stepfunction 参数，这使得实现这一点非常困难。

但是，如果您可以在动画代码本身中指定样式，则可以这样做 - 检查这个小提琴：http: //jsfiddle.net/techfoobar/fAZqn/2/

Answer 2

这是工作 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>​