Jquery如何使用动画效果改变背景色

一、问题引入

  1. jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等

    好像网上也有说要装一个 "jquery.ui" 的插件之类的。但是博主我实在不想引入过多的插件,且恰好本人掌握的CSS比较好一点点,所以就想了下面这么个法子。

  2. 但好在 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 程序设计思想

  1. 首先设计好一个由绿色变为蓝色的动画效果,使用一个类名为 "change_color" 的选择器来存放。
  2. 通过 js 实现点击按钮一次,为 div 标签增加类名为 "change_color" 的类,增加完后,动画便开始播放。当定时器,经过 1100ms 后会执行移除该类的命令,使得点击按钮可以重复播放背景色变化的动画效果。

2.2 重点与难点(坑)

  1. 之所以,要使用定时器来移除 "change_color" 这个类,是因为如果增加类与移除类两句代码 挨得太近,会导致bug,即无法实现重复点击按钮,实现反复播放动画。所以为了能够重复播放,且两句执行时间间隔不能太小,所以设置了一个定时器,使得 1100ms 后执行(定时器的时间还得根据你的动画持续时间而定,保证动画播放完以后,再进行类的移除)

  2. 其实还有一种方式,但前提是 中间的代码足够长 (即机器周期足够长)

    obtn.click(function(){
    
    			obox.removeClass('change_color');
    ...
    ...
    ...
    obox.addClass('change_color');
    })

    每次点击,播放动画前先移除类,经过若干个机器周期(究竟多少个,代码要多长,我也不清楚),再增加该类,便能达到预期效果。

2.3 效果展示

Jquery如何使用动画效果改变背景色的更多相关文章

  1. jQuery之简单动画效果

    1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...

  2. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  3. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  4. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  5. python 之 前端开发( jQuery事件、动画效果、.each()、 .data())

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  6. Jquery基础(动画效果的轮播图特效)

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  7. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

  8. tableview中用动画效果改变cell的高度

    我们要的效果大概就是如下效果: 当我们选择一个cell的时候,我们就要改变它的高度,并且以动画的形式. 我们该如何实现这个效果呢?我们主要需要使用以下这两个方法: - (CGFloat)tableVi ...

  9. 关于jquery自带动画效果的stop()问题

    首先先来看一下jquery中stop()的用法 stop()用于在动画执行前停止正在执行的动画 stop(stopAll,goToEnd)的两个参数为布尔值: stopAll:true/false:是 ...

随机推荐

  1. cb39a_c++_STL_算法_for_each_transform_比较

    cb39a_c++_STL_算法_for_each_transform_比较for_each() 速度快,不灵活transform() 速度慢, 非常灵活 STL算法-修改性算法for_each()c ...

  2. 如何修改git commit的author信息

    本地有多个git账号时,容易发生忘记设置项目默认账号,最后以全局账号提交的情况,其实对代码本身并无影响,只是提交记录里显示的是别的名字稍显别扭. 举个例子:  查看提交日志,假设以a(a@email. ...

  3. GCC编译和链接过程

    GCC(GNU Compiler Collection,GNU编译器套件),是由 GNU 开发的编程语言编译器.它是以GPL许可证所发行的自由软件,也是 GNU计划的关键部分.GCC原本作为GNU操作 ...

  4. el-switch 初始值(默认值)不能正确显示状态问题

    <el-table-column align="center" label="状态">       <template slot-scope= ...

  5. matlab批量处理数据的方法

    问题描述: 有多个.mat格式数据(本文数据名称:‘buf_026.mat’),要抽取其中的数据进行运算,结果返回到数组/xlsx等 关键字:num2str/ xlsxwrite/ eval/ 元胞数 ...

  6. Kali Day1

    一.最新版本的Kali Linux的账号名和密码都是kali. 如何切换root  步骤如下: 1. 设置密码 sudo passwd root 2. 切换身份 su 3. 图示 二.快捷键 1. K ...

  7. hive中left semi join 与join 的区别

    LEFT SEMI JOIN:左半开连接会返回左边表的记录,前提是其记录对于右边表满足ON语句中的判定条件.对于常见的内连接(INNER JOIN),这是一个特殊的,优化了的情况.大多数的SQL方言会 ...

  8. SpringBoot启动源码及自定义starter

    为什么springboot工程能够在mian方法中完成启动呢?需要大家掌握的有几个点:1.SPISPI在springboot中是去读取META-INF/spring.factories目录的配置文件内 ...

  9. 硬刚 lodash 源码之路,compact & concat

    前置 本篇随笔包含 _.compact 和 _.concat 及其依赖的工具函数. 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节. compact _.compact(ar ...

  10. 让网页变灰的实现_网站蒙灰CSS样式总汇

    每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果: 方法一 html { -webkit-filter: grayscale(100%);filter:progid:D ...