Jquery如何使用animation动画效果改变背景色的代码
一、问题引入
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加更多的运作效果实例
复制代码 代码如下: //animationjQuery.extend({ easing: { // ******* back backEaseIn: function (p, n, firstNum, diff) { var c = firstNum + diff; var s = 1.70158; // default overshoot value, can be adjusted to suit
-
jQuery Animation实现CSS3动画示例介绍
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red").详细用法请参考jQuery 效果 - animate()方法和官方教程. 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的.如translate(), ro
-
JQuery 自定义CircleAnimation，Animate方法学习笔记
在此贴出一些学习成果,希望能对学习JQuery的其他同学有所帮助,同时也记录下自己的学习情况. 看了一些JQuery的官方教程,已经有点心潮澎湃了,就决定自己尝试着写一些东西出来.我看到了很多很绚的动画效果,然后决定自己也尝试一下,我决定要写一个圆周运动的动画效果,下面贴出js代码 复制代码 代码如下: var CircleAnimation = function (center_left, center_top, id, clockwise, duration) { return new Ci
-
Jquery如何使用animation动画效果改变背景色的代码
一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等 好像网上也有说要装一个 "jquery.ui" 的插件之类的.但是博主我实在不想引入过多的插件, 且恰好本人掌握的CSS比较好一点点, 所以就想了下面这么个法子. 但好在 CSS 它自带的animation动画效果更加强大,它可以为我们提供背景
-
Jquery如何使用animation动画效果改变背景色
Jquery如何使用animation动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等 好像网上也有说要装一个 "jquery.ui" 的插件之类的.但是博主我实在不想引入过多的插件, 且恰好本人掌握的CSS比较好一点点, 所以就想了下面这么个法子. 但好在 CSS 它自带的
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li></li> --> <li&g
-
通过jquery实现页面的动画效果(实例代码)
有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动
-
jQuery实现图像旋转动画效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
-
JQuery实现DIV其他动画效果的简单实例
1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
jQuery实现感应鼠标动画效果自动伸长的输入框实例
本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
简单谈谈Core Animation 动画效果
在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): •UIView 继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. •UIView 负责对内容的管理,而CALayer则是对内容的绘制 •UIView 中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. •通过修改CALayer可
-
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
-
jQuery实现的导航动画效果(附demo源码)
本文实例讲述了jQuery实现的导航动画效果.分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <scrip