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


Posted in jQuery onJuly 20, 2020

 一、问题引入

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动画效果改变背景色的文章就介绍到这了,更多相关Jquery如何使用animation动画效果改变背景色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
You might like
php中使用GD库做验证码
2016/03/31 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
党员创先争优承诺书
2014/03/26 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
硕士生找工作求职信
2014/07/05 职场文书
网络技术专业求职信
2014/07/13 职场文书
学校运动会报道稿
2014/09/23 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
公司表扬信格式
2015/05/04 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB