我试图在使用 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>
关于javascript - 如何使用 jquery 为缩放 css 属性设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35429935/