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压缩利器
Feb 20 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vuex提交state&&实时监听state数据的改变方法
Sep 16 Javascript
Vue程序调试的方法
Jun 17 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 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
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP微信支付开发实例
2016/06/22 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
js获取ip和地区
2017/03/10 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python translator使用实例
2008/09/06 Python
浅谈python中set使用
2016/06/30 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
大码女装:Ulla Popken
2019/08/06 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
大学学风建设方案
2014/05/04 职场文书
组工干部对照检查材料
2014/08/25 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
红歌会主持词
2015/07/02 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
2019思想汇报范文
2019/05/21 职场文书
求职信如何撰写?
2019/05/22 职场文书