jquery重新播放css动画所遇问题解决


Posted in Javascript onAugust 21, 2013

最近在做css动画,遇到需要用脚本重新播放动画的情况。例如:

css动画代码

.seed_txt_out .seed_txt h2 { 
animation-name: seed-h2; 
animation-duration: 2s; 
animation-timing-function: ease; 
animation-delay: 0s; 
animation-iteration-count: 1; 
animation-direction: alternate; 
animation-play-state: running; 
position: relative; 
top: 10px; 
} 
@keyframes seed-h2 
{ 
from {top: -120px;} 
to {top: 10px;} 
}

jquery调用播放
$(".seed_txt_out").children("div").removeClass("seed_txt"); 
$(".seed_txt_out").children("div").addClass("seed_txt");

这时候,会发现,第一次显示,动画会正确播放,但是,第二次的时候,动画就不会播放了。

后来上网查了一下,解决办法很简单,复制一个元素,把原来的去掉,在新的上面添加式样就可以了。

$(opts.txt).children("div").removeClass("seed_txt"); 
temp = $(opts.txt).children("div:eq(" + $(this).parent("ul").children("li").index(this) + ")"); 
newDiv = temp.clone(true); 
temp.after(newDiv); 
temp.remove(); 
newDiv.addClass("seed_txt");

这里有个链接,老外解决的办法。还说了其它情况。遇到类似问题的朋友可以参考下,当然,是英文的。
http://css-tricks.com/restart-css-animation/
Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
JS性能优化笔记搜索整理
Aug 21 #Javascript
JS检测图片大小的实例
Aug 21 #Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 #Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 #Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 #Javascript
You might like
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
Opacity.js
2007/01/22 Javascript
jQuery使用手册之一
2007/03/24 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python中文编码知识点
2019/02/18 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
职务任命书范本
2014/06/05 职场文书
预防煤气中毒方案
2014/06/16 职场文书
企业授权委托书范本
2014/09/22 职场文书
服务员岗位职责
2015/02/03 职场文书
第一节英语课开场白
2015/06/01 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL