快捷導(dǎo)航

Jquery如何使用animation動(dòng)畫(huà)效果改變背景色的代碼

更新時(shí)間：2020年07月20日 09:53:47 作者：油炸地獄

這篇文章主要介紹了Jquery如何使用animation動(dòng)畫(huà)效果改變背景色,需要的朋友可以參考下

一、問(wèn)題引入

jquery的animate動(dòng)畫(huà)雖然強(qiáng)大，但是無(wú)法使用其進(jìn)行背景色(background-color)的動(dòng)畫(huà)效果變化，因?yàn)閍nimate動(dòng)畫(huà)效果只能動(dòng)態(tài)改變數(shù)值型的參數(shù)，例如：top，left，width，height...等等

好像網(wǎng)上也有說(shuō)要裝一個(gè) "jquery.ui" 的插件之類(lèi)的。但是博主我實(shí)在不想引入過(guò)多的插件，且恰好本人掌握的CSS比較好一點(diǎn)點(diǎn)，所以就想了下面這么個(gè)法子。

但好在 CSS 它自帶的animation動(dòng)畫(huà)效果更加強(qiáng)大，它可以為我們提供背景色的動(dòng)態(tài)變化。所以我們可以利用 Js+CSS 的方法達(dá)成我們預(yù)期效果。

二、demo展示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Jquery無(wú)法通過(guò)animate動(dòng)畫(huà)改變背景色</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(){
					/*	
						由于需要?jiǎng)赢?huà)能夠重復(fù)播放，所以我們需要反復(fù)刪除和添加 change_color 這個(gè)類(lèi)，
						按照正常邏輯，先刪除該類(lèi)，再添加應(yīng)當(dāng)會(huì)正常播放動(dòng)畫(huà)，但經(jīng)多次試驗(yàn)由于兩句執(zhí)行的時(shí)間間隔太小，
						導(dǎo)致出現(xiàn)bug，無(wú)法達(dá)到預(yù)期效果，所以我們要想辦法讓這兩句執(zhí)行的時(shí)間間隔長(zhǎng)一點(diǎn)
						obox.removeClass('change_color');
						obox.addClass('change_color');
					*/
					obox.addClass('change_color');
					/*----通過(guò)定時(shí)器延遲 1100ms 后執(zhí)行移除類(lèi)的指令，這樣就能解決問(wèn)題了-----*/
					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 程序設(shè)計(jì)思想

首先設(shè)計(jì)好一個(gè)由綠色變?yōu)樗{(lán)色的動(dòng)畫(huà)效果，使用一個(gè)類(lèi)名為 "change_color" 的選擇器來(lái)存放。
通過(guò) js 實(shí)現(xiàn)點(diǎn)擊按鈕一次，為 div 標(biāo)簽 增加類(lèi)名為 "change_color" 的類(lèi)，增加完后，動(dòng)畫(huà)便開(kāi)始播放。 當(dāng)定時(shí)器，經(jīng)過(guò) 1100ms 后會(huì)執(zhí)行移除該類(lèi)的命令， 使得點(diǎn)擊按鈕可以重復(fù)播放背景色變化的動(dòng)畫(huà)效果。

2.2 重點(diǎn)與難點(diǎn)(坑)

之所以，要使用定時(shí)器來(lái)移除 "change_color" 這個(gè)類(lèi)，是因?yàn)槿绻黾宇?lèi)與移除類(lèi)兩句代碼 挨得太近 ，會(huì)導(dǎo)致bug，即無(wú)法實(shí)現(xiàn)重復(fù)點(diǎn)擊按鈕，實(shí)現(xiàn)反復(fù)播放動(dòng)畫(huà)。所以為了能夠重復(fù)播放，且兩句執(zhí)行時(shí)間間隔不能太小，所以設(shè)置了一個(gè)定時(shí)器，使得 1100ms 后執(zhí)行 (定時(shí)器的時(shí)間還得根據(jù)你的動(dòng)畫(huà)持續(xù)時(shí)間而定，保證動(dòng)畫(huà)播放完以后，再進(jìn)行類(lèi)的移除)

其實(shí)還有一種方式，但前提是 中間的代碼足夠長(zhǎng) (即機(jī)器周期足夠長(zhǎng))

obtn.click(function(){
			
			obox.removeClass('change_color');
			...
			...
			...
			obox.addClass('change_color');
})

每次點(diǎn)擊，播放動(dòng)畫(huà)前先移除類(lèi)，經(jīng)過(guò)若干個(gè)機(jī)器周期( 究竟多少個(gè)，代碼要多長(zhǎng)，我也不清楚 )，再增加該類(lèi)，便能達(dá)到預(yù)期效果。

2.3 效果展示

到此這篇關(guān)于Jquery如何使用animation動(dòng)畫(huà)效果改變背景色的文章就介紹到這了,更多相關(guān)Jquery如何使用animation動(dòng)畫(huà)效果改變背景色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: