源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery重新播放css动画所遇问题解决

  • 时间:2022-03-11 21:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery重新播放css动画所遇问题解决
最近在做css动画,遇到需要用脚本重新播放动画的情况。例如: css动画代码
[u]复制代码[/u] 代码如下:
.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调用播放
[u]复制代码[/u] 代码如下:
$(".seed_txt_out").children("div").removeClass("seed_txt"); $(".seed_txt_out").children("div").addClass("seed_txt");
这时候,会发现,第一次显示,动画会正确播放,但是,第二次的时候,动画就不会播放了。 后来上网查了一下,解决办法很简单,复制一个元素,把原来的去掉,在新的上面添加式样就可以了。
[u]复制代码[/u] 代码如下:
$(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/
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部