欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2020年07月20日 09:53:47   作者:油炸地獄  
這篇文章主要介紹了Jquery如何使用animation動(dòng)畫效果改變背景色,需要的朋友可以參考下

 一、問(wèn)題引入

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

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

但好在 CSS 它自帶的animation動(dòng)畫效果更加強(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)畫改變背景色</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)赢嬆軌蛑貜?fù)播放,所以我們需要反復(fù)刪除和添加 change_color 這個(gè)類,
						按照正常邏輯,先刪除該類,再添加應(yīng)當(dāng)會(huì)正常播放動(dòng)畫,但經(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í)行移除類的指令,這樣就能解決問(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)畫效果,使用一個(gè)類名為 "change_color" 的選擇器來(lái)存放。
  • 通過(guò) js 實(shí)現(xiàn)點(diǎn)擊按鈕一次,為 div 標(biāo)簽 增加類名為 "change_color" 的類,增加完后,動(dòng)畫便開(kāi)始播放。 當(dāng)定時(shí)器,經(jīng)過(guò) 1100ms 后會(huì)執(zhí)行移除該類的命令, 使得點(diǎn)擊按鈕可以重復(fù)播放背景色變化的動(dòng)畫效果。

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

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

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

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

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

2.3 效果展示

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

相關(guān)文章

最新評(píng)論