jQuery用于动画化边框半径 [英] jQuery for animating border radius
本文介绍了jQuery用于动画化边框半径的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个问题,动画 border-top-left-radius
样式。我使用这种风格通过分别输入两个长度值。
I have a problem animating border-top-left-radius
style. I use this style by entering two length values separately.
border-top-left-radius: 15px 25px;
我想分别增加这两个长度值。 jquery.animate )
。
I would like to increase these two length values separately via jquery.animate()
.
是否有办法实现?
推荐答案
border-top-left-radius只接受一个值?所以你会像下面这样动画:
border-top-left-radius accepts just one value right? So you would animate it like:
$('.class').animate({borderTopLeftRadius: 20})
EDIT
不知道jQuery是否支持这个开箱即用。也许你可以像这样实现步骤回调:
Not sure if jQuery supporst this out of the box. Maybe you can implement the step callback like this:
$('#container').animate({
borderTopLeftRadiusSideLength: 500,
borderTopLeftRadiusUpperLength: 50
}, {
duration: 5000,
step: function (val, context) {
$(this).data(context.prop, val);
var side = $(this).data('borderTopLeftRadiusSideLength');
var upper = $(this).data('borderTopLeftRadiusUpperLength');
if (side && upper) {
$(this).css('borderTopLeftRadius', side + 'px ' + upper + 'px');
}
}
});
这篇关于jQuery用于动画化边框半径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文