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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
xml+php动态载入与分页
2006/10/09 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
快速入手Python字符编码
2016/08/03 Python
Python MD5加密实例详解
2017/08/02 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
联想C++笔试题
2012/06/13 面试题
Ruby如何创建一个线程
2013/03/10 面试题
学生就业推荐信
2013/11/13 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
优秀应届生求职信
2014/06/16 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
离婚协议书范本2014
2014/10/27 职场文书
中国世界遗产导游词
2015/02/13 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL