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 相关文章推荐
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
node创建Vue项目步骤详解
Mar 06 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下载文件的详解
2013/06/02 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript的原型继承详解
2015/02/15 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Java及python正则表达式详解
2017/12/27 Python
python正则-re的用法详解
2019/07/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
解决Python安装cryptography报错问题
2020/09/03 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
实习护理工作自我评价
2013/09/25 职场文书
给导游的表扬信
2014/01/10 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
档案工作个人总结
2015/03/03 职场文书
导游词之云南丽江古城
2019/09/17 职场文书