Question

当我使用jQuery单击按钮时，我试图使用“bubble”类来创建一个圆形div。我想让它从零开始出现并且增长到它的全尺寸，但我无法让它工作。继承我的代码：

HTML 显示泡泡 ... CSS

jacob.png

的Javascript

HTTP Request Post-Receive Hook for Stash

Answer 1

您可以使用CSS执行转换，然后只需使用Javascript作为＆＃39;开关＆＃39;它添加了类来启动动画。试试这个：

＆＃13;

$('button').click(function() {
	$('.bubble').addClass('animate');
})

＆＃13;

.bubble {
    transform: scale(0);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #C00;
    transition: all 5s;
}
.bubble.animate {
    transform: scale(1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Inflate!</button>

<div class='col-lg-2 col-md-2 well bubble'></div>

＆＃13;

Answer 2

目前，您无法将animate与transform属性see here

一起使用

但是，您可以添加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>

Answer 3

最好使用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的上述解决方案也是在附加事件上添加类的好方法。

Answer 4

您可以使用Velocity.js。 http://velocityjs.org/ 例如：

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

Answer 5

使用步骤回调和计数器。这里的计数器只是数字1。
在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'})

如何使用jquery为scale css属性设置动画？

5 个答案: