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图片放大镜效果
Jun 23 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现聊天对话框
Feb 08 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
js一组验证函数
2008/12/20 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
中学家长会邀请函
2014/02/03 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
万能检讨书2000字
2014/10/17 职场文书
Python如何配置环境变量详解
2021/05/18 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle