jQuery的animate()方法做一个颜色的渐变
需求：在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()方法做一个颜色的渐变的更多相关文章
- jQuery的animate方法在IE8下出现小问题
今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- 使用jQuery的animate方法制作滑动菜单
周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...
- jQuery 效果 - animate() 方法
http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...
- jQuery的animate方法在IE7下出现小问题
接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊: 然后打开IE的F12工具,先看样式,再看滑动效果:本来应该显示 ...
- 关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法
这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后 ...
- WPF 自己做一个颜色选择器
程序开发过程中,经常会遇到需要支持动态配置主题颜色的问题,通常,一个程序会有多种不同的颜色风格主题供选 有时候,更细致一些的地方,会需要支持自己配置颜色,这样我们就需要一个颜色选择器啦,下面是我自己开 ...
- jquery之 animate()方法详解
jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...
- jQuery动画animate方法使用介绍
用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...
随机推荐
- 【Linux命令】ulimit设置最大文件打开数
一.简介 在Linux下有时会遇到Socket/File : Can't open so many files的问题.其实Linux是有文件句柄限制的,而且Linux默认一般都是1024(阿里云主机默 ...
- spring 事务 XML
事务就是AOP的很典型的应用.(原来需要自己写代码前开启关闭事务,现在通过spring的配置) 所以必要要有<aop:config>,<aop:config>里面要有<a ...
- Springboot创建项目（idea版本）
一:概述 由于springboot项目,不管是java工程还是web工程都可以直接以jar方式运行,所以推荐创建jar工程,这里创建jar工程项目为例. 二:两种方式创建springboot项目 1. ...
- Kubernetes service 三种类型/NodePort端口固定
Kubernetes service 三种类型 • ClusterIP:默认,分配一个集群内部可以访问的虚拟IP(VIP)• NodePort:在每个Node上分配一个端口作为外部访问入口• Load ...
- python3 用户名和密码三次错误
一.需求 1)密码输错超过三次进行锁定: 2)如果用户名在锁定文件中提示错误: 二.流程图 三.代码 # Aduthor:CCIP-Ma import sys f=open("passwor ...
- 2019 物易云通java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.物易云通等公司offer,岗位是Java后端开发,因为发展原因最终选择去了物易云通,入职一年时间了,也成为了面 ...
- vs2015 创建MVC项目
直接上图吧! 第一步:新建项目 第二步:选择模板 第三步:系统自动生成项目文件 第四步:创建控制器(C):找到Controllers文件夹->右键->添加->控制器 第五步:添加控制 ...
- JavaScript HTML DOM 节点
要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset=&quo ...
- VS2010 报错该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失
尤其代码是从linux平台复制过来: 报错如图: 更有甚者基本函数都报错: 当下检查发现if else break case等基本函数并无问题时,报错行数明显不一致等一定要注意文档编码格式, 最简单的 ...
- Arthas实践--抽丝剥茧排查线上应用日志打满问题
现象 在应用的 service_stdout.log里一直输出下面的日志,直接把磁盘打满了: 23:07:34.441 [TAIRCLIENT-1-thread-1] DEBUG io.netty.c ...