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选择器源码解读(二):select方法
Mar 31 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
JS实现前端动态分页码代码实例
Jun 02 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
深入理解python中的atexit模块
2017/03/07 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python通过format函数格式化显示值
2020/10/17 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
远程调用的原理
2014/07/05 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
大学军训感言300字
2014/03/09 职场文书
小班下学期评语
2014/05/04 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL