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