如何使用jquery动画缩放css属性？ [英] How do I animate a scale css property using jquery?

问题描述

我试图有一个圆形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屋！