Jquery如何使用animation動畫效果改變背景色
阿新 • • 發佈：2020-07-21
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.addClass('change_color');
/*----通過定時器延遲 1100ms 後執行移除類的指令，這樣就能解決問題了-----*/
var timer = setTimeout(function(){
obox.removeClass('change_color');
},1100);
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="變色">
<div class="box"></div>
</body>
</html>2.1 程式設計思想
- 首先設計好一個由綠色變為藍色的動畫效果，使用一個類名為 "change_color" 的選擇器來存放。
- 通過 js 實現點選按鈕一次，為 div 標籤 增加類名為 "change_color" 的類，增加完後，動畫便開始播放。 當定時器，經過 1100ms 後會執行移除該類的命令， 使得點選按鈕可以重複播放背景色變化的動畫效果。
2.2 重點與難點(坑)
之所以，要使用定時器來移除 "change_color" 這個類，是因為如果增加類與移除類兩句程式碼 捱得太近 ，會導致bug，即無法實現重複點選按鈕，實現反覆播放動畫。所以為了能夠重複播放，且兩句執行時間間隔不能太小，所以設定了一個定時器，使得 1100ms 後執行 (定時器的時間還得根據你的動畫持續時間而定，保證動畫播放完以後，再進行類的移除)
其實還有一種方式，但前提是 中間的程式碼足夠長 (即機器週期足夠長)
obtn.click(function(){
obox.removeClass('change_color');
...
...
...
obox.addClass('change_color');
})
每次點選，播放動畫前先移除類，經過若干個機器週期( 究竟多少個，程式碼要多長，我也不清楚 )，再增加該類，便能達到預期效果。
2.3 效果展示
到此這篇關於Jquery如何使用animation動畫效果改變背景色的文章就介紹到這了,更多相關Jquery如何使用animation動畫效果改變背景色內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！