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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue打包npm run build时候界面报错的解决
Aug 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
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php获取远程文件内容的函数
2015/11/02 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python实现串口通信的示例代码
2020/02/10 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
民族学专业求职信
2014/07/28 职场文书
会议开幕词
2015/01/28 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
python的变量和简单数字类型详解
2021/09/15 Python