我正在尝试在使用jQuery单击按钮时弹出一个带有"bubble"类的圆圈div。我想让它从无到有并增长到完全大小,但我无法让它工作。这是我的代码:
.HTML 显示气泡 ....CSS
.bubble {
transform: scale(0);
}
爪哇语
$('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>
目前不能将animate
与 transform
属性一起使用,请参见此处
但是,您可以添加 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.
"现在"将在 5000ms 内为 0 到 1。
$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})
香草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)