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. Linux之FineBI集群部署

    在企业应用中,通常单个计算机的配置是有限的,而企业应用又是高并发的需求,这个时候会通过计算机集群的方式来提高并发数,从而提高整体应用服务的性能.集群是将多台计算机作为一个整体来提供相关应用的服务.Fi ...

  2. java基础(八) 深入解析常量池与装拆箱机制

    引言   本文将介绍常量池 与 装箱拆箱机制,之所以将两者合在一起介绍,是因为网上不少文章在谈到常量池时,将包装类的缓存机制,java常量池,不加区别地混在一起讨论,更有甚者完全将这两者视为一个整体, ...

  3. centos7 yum安装mysql | mariaDb

    mysql解释: mysql数据库是最常用的一种数据库,下面我来在centos7的迷你版上安装一下mysql.绝对纯净的环境哦 centos:    CentOS-7-x86_64-Minimal-1 ...

  4. 关于removeChild

    var a=document.body; document.body.parentNode.removeChild(a) console.log(a); a的内容还是body???whY

  5. Mybatis显示SQL语句

    众所周知,hibernate可以通过配置show_sql在控制台显示sql语句,Mybatis可不可以呢?当然是可以的,将ibatis log4j运行级别调到DEBUG可以在控制台打印出ibatis运 ...

  6. 树莓派raspberry Pi2 介绍

    Compared to the Raspberry Pi 1 it has: A 900MHz quad-core ARM Cortex-A7 CPU 1GB RAM Like the (Pi 1) ...

  7. CATransform3D的m34使用

    CATransform3D的m34使用 效果图 源码 // // ViewController.m // StarWars // // Created by YouXianMing on 15/11/ ...

  8. Sharepoint 2013 - 直接显示Doclib中的html page

    缺省的HTML不能直接显示,会被要求存盘.以下操作可以修改 Go to Central Administration Select Manage web applications Select the ...

  9. ABAP很厉害是怎么一种体验?

    知乎上偶然看到这个问题,觉得很有意思,我也来回答一发. 我本科和研究生学的是计算机专业,做项目用C/C++,研究生三年项目的代码量大概在三到四万行左右.2007年大学毕业加入SAP成都研究院一直工作到 ...

  10. 25个增强iOS应用程序性能的提示和技巧 — 中级篇

    本文由破船译自:raywenderlich 转载请注明出处:BeyondVincent的博客 _____________ 在开发iOS应用程序时.让程序具有良好的性能是非常关键的.这也是用户所期望的. ...