无论如何,要在 jQuery 事件上向元素添加 css3 过渡动画
有没有办法在 jQuery 事件上添加 css3 动画,例如:
<style>
.box{
width:100px;
height:100px;
bakground-color:#000;
}
.animate{
width:0px;
-webkit-transition-property: width; -webkit-transition-duration: 500ms;
-moz-transition-property: width; -moz-transition-duration: 500ms;
}
<style>
<html>
<div class="box"></div>
<button>click me to animate</button>
$('button').click(function(){
$('.box').addClass('animate');
});
</html>
is there a way to add a css3 animation upon a jQuery event for example:
<style>
.box{
width:100px;
height:100px;
bakground-color:#000;
}
.animate{
width:0px;
-webkit-transition-property: width; -webkit-transition-duration: 500ms;
-moz-transition-property: width; -moz-transition-duration: 500ms;
}
<style>
<html>
<div class="box"></div>
<button>click me to animate</button>
$('button').click(function(){
$('.box').addClass('animate');
});
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
只需将其放入
.box 声明中即可。
你的JS没问题。
Just put the
in the .box declaration.
Your JS is fine.
我认为 animo.js 可能是你的答案 http://labs.bigroomstudios.com/libraries/animo- Node.js (通过 http://tympanus.net/codrops/collective/collective-80 /)
根据他们的网站...
I think animo.js could be your answer http://labs.bigroomstudios.com/libraries/animo-js (via http://tympanus.net/codrops/collective/collective-80/)
Per their site...