Question

我有两个CSS类（c1和c2），我正在使用CSS3过渡进行切换。

现在，我希望在c1和c2之间的状态中使用div 保持（非动画），例如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>

两个班级之间的州

2 个答案: