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验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
js中document.write的那点事
Dec 12 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
基于iview的router常用控制方式
May 30 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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 文件类型判断代码
2009/03/13 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
利用python爬取软考试题之ip自动代理
2017/03/28 Python
代码分析Python地图坐标转换
2018/02/08 Python
pandas数据集的端到端处理
2019/02/18 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Keras自定义IOU方式
2020/06/10 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
学校安全工作制度
2014/01/19 职场文书
业务员简历自我评价
2014/03/06 职场文书
企业文化标语大全
2014/06/10 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
培训通知书模板
2015/04/17 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript