Javascript 如何使用jquery设置缩放css属性的动画？

我试图在使用jQuery单击按钮时弹出一个类为“bubble”的circle div。我想让它从无到有，长成完整的尺寸，但我很难让它工作。这是我的密码：

HTML 显示泡沫 ... CSS

Javascript

 $('button').click(function(){
     $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
 });

---

您可以使用CSS执行转换，然后使用Javascript作为“开关”，添加类来启动动画。试试这个：

$（“按钮”）。单击（函数（）{
$（'.bubble'）.toggleClass（'animate'）；
})

.bubble{
变换：比例（0）；
宽度：250px；
高度：250px；
边界半径：50%；
背景色：#C00；
过渡：所有5s；
}
.bubble.animate{
变换：比例（1）；
}

切换

当前，您不能将

动画

与

变换

属性一起使用

但是，您可以添加css

transition

值并修改css本身

var标度=1；
setInterval（函数（）{
比例=比例==1？2:1
$（'.circle'）.css（'transform'，'scale（'+scale+'））'）
}，1000）

.circle{
保证金：20px自动；
背景颜色：蓝色；
边界半径：50%；
宽度：20px；
高度：20px；
变换：比例（1）；
转换：转换250ms缓进缓出；
}

---

最好使用CSS3动画。对于频繁间隔的动画，可以与支持前缀的浏览器一起使用（-webkit、-moz等）-

请参阅此链接-

或者@Rory的上述解决方案也是在附加事件上添加类的好方法。

您可以使用Velocity.js。 例如：

$("div").velocity({
  "opacity" : 0,
  "scale" : 0.0001
},1800)

---

使用步骤回调和计数器。这里的计数器正好是1号。
“现在”将在5000毫秒内为0到1

$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})

香草JS动画方法（现代浏览器支持，无IE）

---

您希望何时缩放项目？悬停、页面加载或其他方式？请澄清您的问题。您只能使用jq

animate（）

方法设置数值属性的动画。最好的办法是切换一个类，处理CSS转换，看看它是如何工作的，但还没有弄清楚如何控制动画计时和放松。有什么线索吗？有几个CSS规则可供您使用，有关更多信息，请参阅，并尝试左侧的链接以阅读可用规则。当您使用动态定位和动画来设置CSS无法设置的内容时，这是最有用的

$("div").velocity({
  "opacity" : 0,
  "scale" : 0.0001
},1800)

$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})

$('.bubble').get(0).animate([{"transform": "scale(1)"}],
{duration: 5000,easing:'linear'})