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)查了一下，解決辦法很簡單，復(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");
這里有個鏈接，老外解決的辦法。還說了其它情況。遇到類似問題的朋友可以參考下，當(dāng)然，是英文的。
http://css-tricks.com/restart-css-animation/
css動畫代碼
復(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");
這時候，會發(fā)現(xiàn)，第一次顯示，動畫會正確播放，但是，第二次的時候，動畫就不會播放了。
后來上網(wǎng)查了一下，解決辦法很簡單，復(fù)制一個元素，把原來的去掉，在新的上面添加式樣就可以了。
復(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");
這里有個鏈接，老外解決的辦法。還說了其它情況。遇到類似問題的朋友可以參考下，當(dāng)然，是英文的。
http://css-tricks.com/restart-css-animation/
相關(guān)文章
有些WEB開發(fā)者，會引用一個JQuery類庫，然后在網(wǎng)頁上寫一寫$("#")，$(".")，寫了幾年就對別人說非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過本篇文章給大家介紹jquery定義插件的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了jQuery取消ajax請求的方法,可實(shí)現(xiàn)在Ajax請求超時的情況下取消請求的功能,需要的朋友可以參考下2015-06-06
我們都知道,很多時候,在頁面加載完后都需要做一些相應(yīng)的初始化動作.例如,運(yùn)行某些js特效,設(shè)置表單等等.怎么知道頁面加載完了呢?2009-12-12
這篇文章主要介紹了jQuery鼠標(biāo)滑過橫向時間軸樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
jquery實(shí)現(xiàn)textarea 高度自適應(yīng)
用jquery實(shí)現(xiàn)的textarea 高度自適應(yīng)代碼。這個動畫效果比較流暢。適合新手學(xué)習(xí)。非常簡單實(shí)用，這里推薦給小伙伴們。2015-03-03
jquery無法設(shè)置checkbox選中即沒有變成選中狀態(tài)
設(shè)置以后checkbox并沒有變成選中狀態(tài)，用chrome調(diào)試看了一下，checkbox中確實(shí)有checked屬性，針對這個問題，大家可以參考下本文2014-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單的輪播圖效果，實(shí)現(xiàn)自動播放，能手動切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文給大家介紹jquery效果大全之制作電腦健康體檢得分特效，并附有源碼下載，對jquery效果大全感興趣的朋友一起學(xué)習(xí)吧2015-11-11
JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子，感覺收集到的例子都很不人性話，后來找到一個還可以的，本來想改成類似于騰訊QQ相冊那種方式，仔細(xì)看了一下是Flash的, 而且那個極速上傳插件也不知道用什么做的？問了一下，說是什么cgi. 搞得一頭霧水2010-01-01
在jquery中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用
這一節(jié)主要演示下在JQUERY中的ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下2014-04-04