jQuery提供的animate()方法可以实现一些简单的动画效果,但是其核心库不提供颜色动画的效果,如果想实现颜色动画,需要下载相关插件。

但是,animate()的参数中有一个complete,通过它可以设置动画完成之后的执行函数,这时可以改变颜色。

                  

 <script type="text/javascript">
$("#btn").click(function() {
$("div").animate({
width: 100,
height: 100
}, {
duration: 3000,
complete: function() {
$("div").css("background-color", "red");
}
});
});
</script>

jQuery animate() 改变颜色的更多相关文章

  1. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...

  2. jquery动态改变背景颜色插件

    GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...

  3. jQuery 实现改变图片指定区域的颜色

    javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果. 1.首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄 例1: <img src=& ...

  4. jQuery animate() 方法

    定义和用法 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过 CSS 样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动 ...

  5. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  6. echarts改变颜色属性的demo

    一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. 【前端统计图】echarts改变颜色属性的demo

    一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  9. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

随机推荐

  1. 11招教你做好 ERP 系统维护

    ERP 维护的具体工作内容主要包括以下几个方面: 例行和突发事件的处理 以管理和技术的手段,维护和发展 ERP 运行环境,如平衡技术先进性/实用风险.目标/成本而进行的IT基础结构(服务器.网络.PC ...

  2. 使用MaxCompute访问TableStore(OTS) 简明手册

    摘要: 大数据计算服务 MaxCompute 能够提供强大的分析能力,而分布式 NoSQL 数据库表格存储在行级别上的实时更新和可覆盖性写入等特性,相对于 MaxCompute 内置表 append- ...

  3. 【Android】RxJava的使用(四)线程控制 —— Scheduler

    并没有关系的图 前言 经过前几篇的介绍,对RxJava对模式有了一定的理解:由Observable发起事件,经过中间的处理后由Observer消费.(对RxJava还不了解的可以出门左拐)之前的代码中 ...

  4. frame shiro 授权及原理简述

    shiro 授权模式 shiro采用的是rbac授权模式rbac,基于角色的权限管理,谁扮演什么角色,被允许做什么事情. shiro 授权流程 shiro 授权方式 1.编程式 通过写if/else授 ...

  5. sun.misc.BASE64Encoder在Eclipse中不能直接使用的原因和解决方案

    1.为什么在Eclipse中不能直接使用sun.misc.BASE64Encoder和sun.misc.BASE64Decoder呢? 因为sun.misc.BASE64Encoder和sun.mis ...

  6. Linux 运维工程师一定要知道的六类好习惯和23个教训

    一.线上操作规范 1.测试使用当初学习Linux的使用,从基础到服务到集群,都是在虚拟机做的,虽然老师告诉我们跟真机没有什么差别,可是对真实环境的渴望日渐上升,不过虚拟机的各种快照却让我们养成了各种手 ...

  7. python modules and packages

    https://realpython.com/python-modules-packages/ 在软件开发中,一个module是具有一些相关功能的软件集合,比如,当你在开发一个游戏时,可能会有一个模块 ...

  8. selenium&PhantomJS笔记

    配置pip文件 Windows下pip 配置文件的位置%HOME%/pip/pip.ini linux下安装pip,以Debian Linux为例su -apt-get install python- ...

  9. 委托学习总结(二)匿名方法和lambda表达式

    之前总结了委托这个困惑着大多初学者的概念,继续来学习匿名方法和lambda表达式 (1)我们之前写了这样一段代码 //自定义一个委托 public delegate int Expression(in ...

  10. 点击单个cell高度变化的动画效果

    点击单个cell高度变化的动画效果 效果 说明 1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑 2. 本例子只是提供了一个解决方案,为了简化操作, ...