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仿微信聊天界面
May 06 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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中过滤非法字符的具体实现
2013/10/29 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php生成图片验证码
2015/06/09 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
js实现缓动动画
2020/11/25 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python中time库的实例使用方法
2019/10/31 Python
基于FME使用Python过程图解
2020/05/13 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
单位消防安全责任书
2014/07/23 职场文书
邀请函的格式
2015/01/30 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书