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 相关文章推荐
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
字符串反转_JavaScript
Apr 28 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
JavaScript解析JSON数据示例
Jul 16 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
多数据表共用一个页的新闻发布
2006/10/09 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python常见数据结构详解
2014/07/24 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
在Python中实现字典反转案例
2020/12/05 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
干部鉴定材料
2014/05/18 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
linux目录管理方法介绍
2022/06/01 Servers