61°

Jquery如何使用animation动画效果改变背景色

Jquery如何使用animation动画效果改变背景色

一、问题引入

  1. jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等

    好像网上也有说要装一个 "jquery.ui" 的插件之类的。但是博主我实在不想引入过多的插件,且恰好本人掌握的CSS比较好一点点,所以就想了下面这么个法子。

  2. 但好在 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;
		}

	&lt;/style&gt;
	&lt;script type="text/javascript" src="js/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;
		
		$(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);

			})

		})

	&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
	&lt;input type="button" id="btn" value="变色"&gt;
	&lt;div class="box"&gt;&lt;/div&gt;
&lt;/body&gt;

</html>


2.1 程序设计思想

  1. 首先设计好一个由绿色变为蓝色的动画效果,使用一个类名为 "change_color" 的选择器来存放。
  2. 通过 js 实现点击按钮一次,为 div 标签增加类名为 "change_color" 的类,增加完后,动画便开始播放。当定时器,经过 1100ms 后会执行移除该类的命令,使得点击按钮可以重复播放背景色变化的动画效果。

2.2 重点与难点(坑)

  1. 之所以,要使用定时器来移除 "change_color" 这个类,是因为如果增加类与移除类两句代码 挨得太近,会导致bug,即无法实现重复点击按钮,实现反复播放动画。所以为了能够重复播放,且两句执行时间间隔不能太小,所以设置了一个定时器,使得 1100ms 后执行(定时器的时间还得根据你的动画持续时间而定,保证动画播放完以后,再进行类的移除)

  2. 其实还有一种方式,但前提是 中间的代码足够长 (即机器周期足够长)

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

    })

    每次点击,播放动画前先移除类,经过若干个机器周期(究竟多少个,代码要多长,我也不清楚),再增加该类,便能达到预期效果。


2.3 效果展示

动画效果展示

本文转载自博客园,原文链接:https://www.cnblogs.com/fry-hell/p/13331117.html

全部评论: 0

    我有话说: