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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现推拉门效果
Oct 19 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
python 内置模块详解
2019/01/01 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Django中modelform组件实例用法总结
2020/02/10 Python
pyspark 随机森林的实现
2020/04/24 Python
Python 如何对文件目录操作
2020/07/10 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
运动会致辞稿50字
2014/02/04 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
导游词之太湖
2019/10/08 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
MySQL Server层四个日志的实现
2022/03/31 MySQL