Jquery如何使用animation動畫效果改變背景色
一、問題引入
-
jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態改變數值型的參數，例如：top，left，width，height...等等
好像網上也有說要裝一個 "jquery.ui" 的插件之類的。但是博主我實在不想引入過多的插件，且恰好本人掌握的CSS比較好一點點，所以就想了下面這么個法子。
-
但好在 CSS 它自帶的animation動畫效果更加強大，它可以為我們提供背景色的動態變化。所以我們可以利用Js+CSS 的方法達成我們預期效果。
二、demo展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery無法通過animate動畫改變背景色</title>
<style type="text/css">
#btn{
display: block;
width:100px;
margin:50px auto 0px;
font:bold 30px/50px 'Microsoft Yahei';
background-color: lightblue;
}
.box{
margin:100px auto 0px;
background-color: green;
width:400px;
height:400px;
}
@keyframes color_turn{
from{
background-color: green;
}
to{
background-color: blue;
}
}
.change_color{
animation: color_turn 500ms ease 2 alternate;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var obtn = $('#btn');
var obox = $('.box');
obtn.click(function(){
/*
由於需要動畫能夠重復播放，所以我們需要反復刪除和添加 change_color 這個類，
按照正常邏輯，先刪除該類，再添加應當會正常播放動畫，
但經多次試驗只有第一次觸發能夠播放變色動畫，接着再也無法觸發了。這是由於兩句執行的時間間隔太小，導致出現bug，無法達到預期效果
所以我們要想辦法讓下面這兩句代碼執行的時間間隔長一點
obox.removeClass('change_color');
obox.addClass('change_color');
*/
obox.removeClass('change_color');
// obox.addClass('change_color');
/*----通過定時器延遲 10ms 后執行移除類的指令，這樣就能解決問題了-----*/
var timer = setTimeout(function(){
obox.addClass('change_color');
},10);
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="變色">
<div class="box"></div>
</body>
</html>
2.1 程序設計思想
- 首先設計好一個由綠色變為藍色的動畫效果，使用一個類名為 "change_color" 的選擇器來存放。
- 通過 js 實現點擊按鈕一次，先對div 標簽清除類名為 "change_color" 的類（第一次觸發沒有該類，不用管），當定時器，經過 10ms 后會執行添加該類的命令，增加類后，動畫便開始播放。通過定時器延長了兩句代碼的間隔時間，使得點擊按鈕可以重復播放背景色變化的動畫效果。
2.2 重點與難點(坑)
-
之所以，要使用定時器來添加 "change_color" 這個類，是因為如果移除類與增加類兩句代碼 挨得太近，會導致bug，即無法實現重復點擊按鈕，反復播放動畫。
具體原因尚不明確，但猜測是因為判定移除該類的程序需要的時間長，所以兩句代碼放太近，會導致最后只判定到該類還存在（即沒有移除過），而已有的類是不會觸發動畫的（只有在原來沒有該類的基礎上，添加類后，才會觸發動畫且只播放一次）
所以為了能夠重復播放，需要反復刪除和添加類，同時由於兩句執行時間間隔不能太小，所以設置了一個定時器，使得 10ms 后才執行添加類，保證程序能夠成功判定類已被移除過。別看 10ms 很小，里面的機器周期數是巨多的 -
其實還有一種方式，但前提是 中間的代碼足夠長 (即機器周期足夠長)
obtn.click(function(){ obox.removeClass('change_color'); ... ... ... obox.addClass('change_color'); })每次點擊，播放動畫前先移除類，經過若干個機器周期(究竟多少個，代碼要多長，我也不清楚)，再增加該類，便能達到預期效果。
2.3 效果展示
