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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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里的JS打印函数
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
php7性能提升的原因详解
2019/10/13 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
教师个人教学总结
2015/02/11 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
PO模式在selenium自动化测试框架的优势
2022/03/20 Python