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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
js实现轮播图特效
May 28 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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与php MySQL 之间的关系
2009/07/17 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Django 路由层URLconf的实现
2019/12/30 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
酒鬼酒广告词
2014/03/21 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
学习保证书范文
2014/04/30 职场文书
销售提升方案
2014/06/07 职场文书
安全责任书模板
2014/07/22 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
课外科技活动总结
2014/08/27 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
社区干部培训心得体会
2016/01/06 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Python实现聚类K-means算法详解
2022/07/15 Python