如何使用jquery动画缩放css属性? [英] How do I animate a scale css property using jquery?
本文介绍了如何使用jquery动画缩放css属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图有一个圆形div与类的泡沫弹出时使用jQuery按钮单击。我想让它从无到有,并成长到其全尺寸,但我有麻烦让它工作。 heres我的代码:
I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code:
HTML
显示泡泡
...
CSS
HTML Show bubble ... CSS
.bubble {
transform: scale(0);
}
Javascript
Javascript
$('button').click(function(){
$('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
});
推荐答案
您可以使用CSS执行转换, Javascript作为'switch',它添加了类来启动动画。试试这个:
You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this:
.bubble {
transform: scale(0);
transition: all 5s;
}
.bubble.animate {
transform: scale(1);
}
$('.bubble').addClass('animate');
这篇关于如何使用jquery动画缩放css属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文