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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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的知识
2006/11/17 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP中,文件上传
2006/12/06 PHP
php xml实例 留言本
2009/03/20 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
环保建议书
2014/03/12 职场文书
贫困证明书范文
2015/06/16 职场文书
mysql部分操作
2021/04/05 MySQL
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers