两个类之间的状态

A state between two classes

本文关键字：之间 状态 两个      更新时间：2023-09-26

我有两个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函数参数，这使得实现这一点非常困难。

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

这是工作jsFiddle，这是结构：

j查询： 

//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>​
相关文章：