需求：在1秒内，由一个颜色变到另一个颜色，不是1秒后再变色。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>背景渐变</title>
  9.     <style>
  10.         div {
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: red;
  14.             color: white;
  15.             font-size: 50px;
  16.             font-weight: 500;
  17.         }
  18.  
  19.         p {
  20.             width: 20px;
  21.             height: 20px;
  22.             background-color: deepskyblue;
  23.         }
  24.     </style>
  25. </head>
  26.  
  27. <body>
  28.     <p></p>
  29.     <div>123</div>
  30. </body>
  31. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  32. <!-- 变态：要想使用颜色渐变，必须要用这个插件！ -->
  33. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
  34. <script>
  35.     $(function () {
  36.         $("p").click(() => {
  37.             $("div").animate({
  38.                 width: 100,
  39.                 height: 100,
  40.                 backgroundColor: "blue",
  41.             },1000);
  42.         })
  43.     });
  44. </script>
  45. </html>

jQuery的animate()方法做一个颜色的渐变的更多相关文章

  1. jQuery的animate方法在IE8下出现小问题

    今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  4. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  5. jQuery的animate方法在IE7下出现小问题

    接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊: 然后打开IE的F12工具,先看样式,再看滑动效果:本来应该显示 ...

  6. 关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

    这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后 ...

  7. WPF 自己做一个颜色选择器

    程序开发过程中,经常会遇到需要支持动态配置主题颜色的问题,通常,一个程序会有多种不同的颜色风格主题供选 有时候,更细致一些的地方,会需要支持自己配置颜色,这样我们就需要一个颜色选择器啦,下面是我自己开 ...

  8. jquery之 animate()方法详解

    jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...

  9. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

随机推荐

  1. 数据仓库003 - 复习Linux shell命令 - 用户用户组 sudo 权限 du-sh find　

    一.用户用户组 [root@localhost ~]# ll /usr/sbin/user* -rwxr-x--- root root -- /usr/sbin/useradd -rwxr-x--- ...

  2. Javal连载4-注释&class与public class区别

    一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释 注释 注释 */ (3)javadoc注释 /* ...

  3. Beyond Compare的自定义破解方法

    因本人是程序员的缘故,经常时不时就是几千几万行代码找不同,也就时常要用到一个超级无敌好用的文本对比软件:Beyond Compare. 然而破解成了一大问题,网上有很多注册码都已经被封了或者是注销掉了 ...

  4. Go命令行—compile

    常用作编译命令行指定的单个go源码包.会生成一个以文件.o为后缀的目标文件,其文件名与包内第一个源文件的文件名相同. 目标文件可以与其他对象组合成一个包档案或直接传递给链接器(go tool link ...

  5. asp.net core系列 62 CQRS架构下Equinox开源项目分析

    一.DDD分层架构介绍 本篇分析CQRS架构下的Equinox开源项目.该项目在github上star占有2.4k.便决定分析Equinox项目来学习下CQRS架构.再讲CQRS架构时,先简述下DDD ...

  6. 一个利用 Parallel.For 并行处理任务，带有进度条（ProgressBar）的 WinForm 实例（下）

    接着上一篇:一个利用 Parallel.For 并行处理任务,带有进度条(ProgressBar)的 WinForm 实例(上) 直接贴代码了: using System; using System. ...

  7. Kubernetes Pod 资源限制

    Kubernetes Pod 资源限制 官方文档:https://kubernetes.io/docs/concepts/configuration/manage-compute-resources- ...

  8. Zabbix-proxy和Zabbix-agent源码安装

    一 .Zabbix Proxy 概述 Zabbix proxy 是一个可以从一个或多个受监控设备采集监控数据并将信息发送到 Zabbix server 的进程,主要是代表 Zabbix server ...

  9. SQL Server备份时间段内插入的数据依旧进入了备份文件？（转载）

    问 MSSql我在本机测试了下.为了延长备份时间,找个大的数据库.开始完整备份bak然后再此库新建表,并增添数据.备份结束.==================还原备份后,在还原的数据库内发现新增的表 ...

  10. EF操作与Linq写法记录

    项目总结:EF操作与Linq写法记录 1.EF引入 新建一个MVC项目之后,要引用EF框架,可以按照以下步骤进行: 1),在Models中添加项目 2),选择Entity Data Model,并重新 ...