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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
在JavaScript中使用timer示例
May 08 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
p5.js实现简单货车运动动画
Oct 23 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使用递归计算文件夹大小
2014/12/24 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python random模块常用方法
2014/11/03 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python中optparser库用法实例详解
2018/01/26 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
软件测试有哪些?什么是配置项?
2012/02/12 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
日语求职信范文
2013/12/17 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014最新实习证明模板
2014/10/02 职场文书
检讨书范文500字
2015/01/28 职场文书
教师工作态度自我评价
2015/03/05 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书