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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
js之ajax文件上传
May 13 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
谈一谈收音机的高放电路
2021/03/02 无线电
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
python中模块的__all__属性详解
2017/10/26 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python命令行参数用法实例分析
2019/06/25 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
执行力心得体会
2013/12/31 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
感谢信模板大全
2015/01/23 职场文书
房产公证书格式
2015/01/26 职场文书
光荣之路观后感
2015/06/12 职场文书
入党申请书怎么写?
2019/06/11 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
详解Laravel制作API接口
2021/05/31 PHP
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL