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

Jquery如何使用animation動畫效果改變背景色的代碼

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

 一、問題引入

jquery的animate動畫雖然強大，但是無法使用其進行背景色(background-color)的動畫效果變化，因為animate動畫效果只能動態(tài)改變數(shù)值型的參數(shù)，例如：top，left，width，height...等等

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

但好在 CSS 它自帶的animation動畫效果更加強大，它可以為我們提供背景色的動態(tài)變化。所以我們可以利用 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 這個類，
						按照正常邏輯，先刪除該類，再添加應當會正常播放動畫，但經(jīng)多次試驗由于兩句執(zhí)行的時間間隔太小，
						導致出現(xiàn)bug，無法達到預期效果，所以我們要想辦法讓這兩句執(zhí)行的時間間隔長一點
						obox.removeClass('change_color');
						obox.addClass('change_color');
					*/
					obox.addClass('change_color');
					/*----通過定時器延遲 1100ms 后執(zhí)行移除類的指令，這樣就能解決問題了-----*/
					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 程序設計思想

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

2.2 重點與難點(坑)

之所以，要使用定時器來移除 "change_color" 這個類，是因為如果增加類與移除類兩句代碼 挨得太近 ，會導致bug，即無法實現(xiàn)重復點擊按鈕，實現(xiàn)反復播放動畫。所以為了能夠重復播放，且兩句執(zhí)行時間間隔不能太小，所以設置了一個定時器，使得 1100ms 后執(zhí)行 (定時器的時間還得根據(jù)你的動畫持續(xù)時間而定，保證動畫播放完以后，再進行類的移除)

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

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

每次點擊，播放動畫前先移除類，經(jīng)過若干個機器周期( 究竟多少個，代碼要多長，我也不清楚 )，再增加該類，便能達到預期效果。

2.3 效果展示

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

相關文章

最新評論