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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
JS前端轻量fabric.js系列之画布初始化
Aug 05 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP的加密方式及原理
2012/06/14 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
Python与Java间Socket通信实例代码
2017/03/06 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Django logging配置及使用详解
2019/07/23 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
用Python进行websocket接口测试
2020/10/16 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
旷课检讨书大全
2014/01/21 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
Redis高并发缓存架构性能优化
2022/05/15 Redis
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android