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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>背景渐变</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: red;

            color: white;

            font-size: 50px;

            font-weight: 500;

        }

        p {

            width: 20px;

            height: 20px;

            background-color: deepskyblue;

        }

    </style>

</head>

<body>

    <p></p>

    <div>123</div>

</body>

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<!-- 变态：要想使用颜色渐变，必须要用这个插件！ -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>

<script>

    $(function () {

        $("p").click(() => {

            $("div").animate({

                width: 100,

                height: 100,

                backgroundColor: "blue",

            },1000);

        })

    });

</script>

</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. ItelliJ Idea 2019提交TFVC变更，系统提示Validation must be performed before checking in

    问题描述 全新安装的Idea 2019,从Azure DevOps Server 2019 (原名TFS)的TFVC代码库下载文件,正常. 修改代码后,签入,系统提示"Validation ...

  2. 大话设计模式Python实现-备忘录模式

    备忘录模式(Memento Pattern):不破坏封装性的前提下捕获一个对象的内部状态,并在该对象之外保存这个状态,这样已经后就可将该对象恢复到原先保存的状态 下面是一个备忘录模式的demo: #! ...

  3. H3C 12508 收集诊断信息

        案例:H3C 12508单板卡出现remove状态,需要配合研发收集诊断信息. (此文档只展示研发要求的诊断信息.) 总体:12500交换机返回三种文件----故障时诊断信息,主备单板的日志文 ...

  4. git 给分支添加描述 管理分支实用方法

    1.背景 在我们工作中,正常情况我们处在一个迭代中,一个人最多会有几个功能,比较正常的操作我们会给每个大功能创建不同的分支,方便管理. 我们可以非常愉快的进行版本管理,遇到特殊情况我们也可以方便版本退 ...

  5. Oracle 11g 服务端的安装步骤

    Ø  简介 本文主要介绍 Oracle 11g 服务端的安装步骤,在介绍之前说明以下几点: 1.   所安装的服务器是本机的虚拟机,操作系统为 Windows Server 2019: 2.   以下 ...

  6. 使用 jQuery.TypeAhead 让文本框自动完成 （一）（最简单的用法）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  7. ssh遇到port 22:No route to host问题的解决方法

    一 iptables 问题 1.没有安装,可以先安装 yum install iptables 2.防火墙的开启与关闭 即时生效,重启失效 service iptables start(开启) ser ...

  8. 排序算法Java代码实现（二）—— 冒泡排序

    本篇内容: 冒泡排序 冒泡排序 算法思想: 冒泡排序的原理是:从左到右,相邻元素进行比较. 每次比较一轮,就会找到序列中最大的一个或最小的一个.这个数就会从序列的最右边冒出来. 代码实现: /** * ...

  9. webservice因引用Oracle.DataAccess.dll导致发布前预编译不通过

    这个问题最初是什么问题已经忘了,虽然就在几小时前/

  10. jersey常用注解解释 JAX-RS常用注解：

    jersey常用注解解释: Annotation 作用 说明 @GET 查询请求 相当于数据库的查询数据操作 @PUT 更新请求 相当于数据库的更新数据操作 @POST 插入请求 相当于数据库的插入数 ...