无论如何,要在 jQuery 事件上向元素添加 css3 过渡动画

发布于 2024-10-31 06:06:23 字数 496 浏览 0 评论 0原文

有没有办法在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

余厌 2024-11-07 06:06:23

只需将其放入

 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
     -moz-transition-property: width; -moz-transition-duration: 500ms;

.box 声明中即可。
你的JS没问题。

Just put the

 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
     -moz-transition-property: width; -moz-transition-duration: 500ms;

in the .box declaration.
Your JS is fine.

丶情人眼里出诗心の 2024-11-07 06:06:23

我认为 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...

"You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event or at any moment you please."

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文