[英]How do I animate a scale css property using jquery?
我试图在使用 jQuery 单击按钮时弹出一个带有“气泡”类的圆形 div。 我想让它从无到有出现并长到它的全尺寸,但我无法让它工作。 继承人我的代码:
HTML 显示气泡 ... CSS
.bubble {
transform: scale(0);
}
Javascript
$('button').click(function(){
$('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
});
您可以使用 CSS 执行过渡,然后仅使用 Javascript 作为“开关”,它添加类以启动动画。 尝试这个:
$('button').click(function() { $('.bubble').toggleClass('animate'); })
.bubble { transform: scale(0); width: 250px; height: 250px; border-radius: 50%; background-color: #C00; transition: all 5s; } .bubble.animate { transform: scale(1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button>Toggle</button> <div class='col-lg-2 col-md-2 well bubble'></div>
目前您不能使用带有transform
属性的animate
,请参见此处
但是,您可以添加 css transition
值并修改 css 本身。
var scale = 1; setInterval(function(){ scale = scale == 1 ? 2 : 1 $('.circle').css('transform', 'scale('+scale+')') }, 1000)
.circle { margin: 20px auto; background-color: blue; border-radius: 50%; width: 20px; height: 20px; transform: scale(1); transition: transform 250ms ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"></div>
最好使用 CSS3 动画。 对于频繁间隔的动画,您可以使用支持前缀的浏览器(-webkit、-moz 等)-
@keyframes fullScale{
from{
transform:scale(0);
}
to{
transform:scale(1);
}
}
.bubble:hover{
animation: fullScale 5s;
}
请参阅此链接 - http://www.w3schools.com/css/css3_animations.asp
或者@Rory 的上述解决方案也是在附加事件上添加类的好方法。
使用步骤回调和计数器。 这里的计数器只是数字 1。
'now' 将在 5000 毫秒内从 0 到 1。
$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})
Vanilla JS 动画方法(现代浏览器支持,无 IE)
https://drafts.csswg.org/web-animations-1/#the-animation-interface
$('.bubble').get(0).animate([{"transform": "scale(1)"}],
{duration: 5000,easing:'linear'})
您可以使用 Velocity.js。 http://velocityjs.org/例如:
$("div").velocity({
"opacity" : 0,
"scale" : 0.0001
},1800)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.