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-data的三种用法
Apr 18 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery实现可以扩展的日历
Dec 01 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 curl参数的详解
2013/06/17 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python实现登录接口的示例代码
2017/07/21 Python
python实现音乐下载的统计
2018/06/20 Python
WxPython实现无边框界面
2019/11/18 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
颁奖晚会主持词
2014/03/25 职场文书
减负增效提质方案
2014/05/23 职场文书
委托书格式
2014/08/01 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
庆元旦演讲稿
2014/09/15 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
公务员检讨书
2014/11/01 职场文书
大雁塔导游词
2015/02/04 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书