jquery重新播放css动画所遇问题解决
更新时间：2013年08月21日 19:14:27 作者：
做css动画，遇到需要用脚本重新播放动画的情况，下面与大家分享下，感兴趣的朋友可以参考下，希望对大家有所帮助
最近在做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/
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/
相关文章
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。其实你只是了解一点皮毛，并不知道其中的道理，下面通过本篇文章给大家介绍jquery定义插件的相关知识，感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了jQuery取消ajax请求的方法,可实现在Ajax请求超时的情况下取消请求的功能,需要的朋友可以参考下2015-06-06
我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?2009-12-12
这篇文章主要介绍了jQuery鼠标滑过横向时间轴样式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
用jquery实现的textarea 高度自适应代码。这个动画效果比较流畅。适合新手学习。非常简单实用，这里推荐给小伙伴们。2015-03-03
设置以后checkbox并没有变成选中状态，用chrome调试看了一下，checkbox中确实有checked属性，针对这个问题，大家可以参考下本文2014-03-03
这篇文章主要为大家详细介绍了jQuery实现简单的轮播图效果，实现自动播放，能手动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文给大家介绍jquery效果大全之制作电脑健康体检得分特效，并附有源码下载，对jquery效果大全感兴趣的朋友一起学习吧2015-11-11
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
今天下午整理文件上传的例子，感觉收集到的例子都很不人性话，后来找到一个还可以的，本来想改成类似于腾讯QQ相册那种方式，仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的？问了一下，说是什么cgi. 搞得一头雾水2010-01-01
在jquery中的ajax方法怎样通过JSONP进行远程调用
这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下2014-04-04
最新评论