Javascript 两类之间的状态

我有两个CSS类（

c1

和

c2

），我正在使用CSS3转换在它们之间切换

现在，我希望一个div停留在

c1

和

c2

之间的状态下（而不是动画），例如60%

c1

和40%

c2

。（如果我在

c1

和

c2

之间播放持续时间为1秒的转换，我希望帧的状态显示为0.4s）

c1

和

c2

具有许多属性（变换等），因此按所需百分比计算每个属性并将其设置为

div

并不容易

---

是否有任何CSS/jQuery方法可用于此目的？

jQueryUI的

switchClass

，

addClass

函数不支持

step

函数参数，这使得实现这一点非常困难

但是，如果可以在动画代码本身中指定样式，则可以完成此操作-检查此小提琴：

，以下是结构：

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);
});​

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

html:

//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);
});​

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

1
2.
​

许多属性无法用百分比来衡量。所以不太可能有一个通用的解决方案。浏览器可以在播放CSS3动画时计算所有属性。难道不可能只有一帧动画的状态吗？为什么不使用第三类呢？div计划何时处于中间状态？在mouseout上还是什么？不。你需要编写自己的函数来完成这项工作。Animate就是-Animate。@reza我正在尝试实现滑动功能，所以我需要太多的类！