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. TileStache生成切片

    1.tilestache.cfg { "cache": { "name": "Disk", "path": " ...

  2. 图片加载库Glide的封装工具类,方便以后使用

    直接上源码.注释得已经很清晰了,直接调用即可. package com.liuguilin.lovewallpaper.utils; /* * Created by 火龙裸先生 on 2017/3/3 ...

  3. web 学习资源

    学习 https://skills.bugbank.cn/ https://github.com/JnuSimba/MiscSecNotes 靶场 http://skysec.top/2018/01/ ...

  4. Centos7安装最新版本的docker

    centos7 安装docker-ce ,最新版本docker,docker阿里云加速docker-ce是指docker的社区版 卸载老版本的 docker 及其相关依赖sudo yum remove ...

  5. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  6. 对MBProgressHUD进行二次封装并精简使用

    对MBProgressHUD进行二次封装并精简使用 https://github.com/jdg/MBProgressHUD 几个效果图: 以下源码是MBProgressHUD支持最新的iOS8的版本 ...

  7. Celery学习--- Celery在项目中的使用

    可以把celery配置成一个应用,注意连接文件命名必须为celery.py 目录格式如下 项目前提: 安装并启动Redis CeleryPro/celery.py   [命名必须为celery.py] ...

  8. Linux which/whereis/locate命令详解

    which 查看可执行文件的位置,从全局环境变量PATH里面查找对应的路径,默认是找 bash内所规范的目录 whereis 查看文件的位置,配合参数-b,用于程序名的搜索,从linux数据库查找. ...

  9. session更换存储,实现在多台服务器共享

    场景 web服务器有多台,每台服务器都会存贮自己的session,session无法在多台服务器共享.所以就需要更换session的存贮空间,存贮在一个共用的空间.通常为了读写速度,我们会选择存贮在内 ...

  10. svn检出项目,Project *** is already imported into workspace

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.如果从svn检出的项目   Import  ----  Existing Maven Pro ...