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調(diào)用播放
$(".seed_txt_out").children("div").removeClass("seed_txt");
$(".seed_txt_out").children("div").addClass("seed_txt");
這時候，會發(fā)現(xiàn)，第一次顯示，動畫會正確播放，但是，第二次的時候，動畫就不會播放了。
后來上網(wǎng)查了一下，解決辦法很簡單，復制一個元素，把原來的去掉，在新的上面添加式樣就可以了。
$(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調(diào)用播放
復制代碼 代碼如下:
$(".seed_txt_out").children("div").removeClass("seed_txt");
$(".seed_txt_out").children("div").addClass("seed_txt");
這時候，會發(fā)現(xiàn)，第一次顯示，動畫會正確播放，但是，第二次的時候，動畫就不會播放了。
后來上網(wǎng)查了一下，解決辦法很簡單，復制一個元素，把原來的去掉，在新的上面添加式樣就可以了。
復制代碼 代碼如下:
$(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/
相關(guān)文章
jQuery基于xml格式數(shù)據(jù)實現(xiàn)模糊查詢及分頁功能的方法
這篇文章主要介紹了jQuery基于xml格式數(shù)據(jù)實現(xiàn)模糊查詢及分頁功能的方法,涉及jQuery使用ajax技術(shù)針對xml格式數(shù)據(jù)的讀取、模糊查詢及分頁顯示等相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了jQuery提示框插件SweetAlert用法,結(jié)合實例形式分析了SweetAlert提示框插件基本功能、使用方法及配置項設(shè)置方法,需要的朋友可以參考下2019-08-08
鼠標滑動過快導致動畫重復執(zhí)行，以至于頁面亂了,下面為大家介紹個防止重復執(zhí)行動畫的方法2014-04-04
這篇文章主要介紹了jQuery中bind()方法用法,實例分析了bind()方法的功能、定義及為匹配元素的特定事件綁定事件處理方法的技巧,需要的朋友可以參考下2015-01-01
jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法
這篇文章主要介紹了jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
本文是對jquery 刪除cookie失效的解決方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)聊天機器人，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
jQuery實現(xiàn)的placeholder效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的placeholder效果,可實現(xiàn)輸入框提示文字的功能,并且針對焦點的情況判定是否顯示,非常簡單實用,需要的朋友可以參考下2016-08-08
下面小編就為大家?guī)硪黄钊肜斫鈐Query之防止冒泡事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標左右拖動滑塊滑動附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12