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实现打开本地文件或文件夹
Mar 09 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
javascript实现小型区块链功能
Apr 03 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实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php实现的递归提成方案实例
2015/11/14 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
使用python求解二次规划的问题
2020/02/29 Python
如何开启linux的ssh服务
2013/06/03 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
函授药学自我鉴定
2014/02/07 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
小学教师党员承诺书
2015/04/27 职场文书
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏