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 ...
随机推荐
- SpringBoot整合log4j2导入新的依赖出现jar冲突解决
1.问题复现: 之前在SpringBoot中配置整合了log4j2,今天在pom文件中,导入新的依赖(依赖如下)之后, <dependency> <groupId>com.gi ...
- Unity C# CSV文件解析与加载（已更新移动端处理方式）
在游戏开发过程中,经常要用到Excel编辑各类数据,如果可以直接用Excel支持的文件格式来读取数据,修改将非常便捷. Excel支持导出CSV类型的文件,这类文件不仅可以用Excel直接打开修改,即 ...
- javascript json写法
javascript json写法 var shuxing = {name:"super",sex:"19",work:"IT"}; 这个k ...
- RootKit随手记(一)RootKit的驱动隐藏、读取配置、卸载安装
边学习边更新这专题,随手记录一下用到的思路,给自己看的(所以读者看可能有些懵,不好意思...) RootKit随手记(一)RootKit的驱动隐藏.读取配置.卸载安装 一.驱动隐藏 1. 隐藏原理 一 ...
- SQL Server中INSERT EXEC语句不能嵌套使用（转载）
问: I have three stored procedures Sp1, Sp2 and Sp3.The first one (Sp1) will execute the second one ( ...
- OpenCV.Net基于傅里叶变换进行文本的旋转校正
本文描述一种利用OpenCV及傅里叶变换识别图片中文本旋转角度并自动校正的方法,由于对C#比较熟,因此本文将使用OpenCVSharp. 文章参考了http://johnhany.net/2013/1 ...
- “金九银十”已过，总结我的天猫、蚂蚁、头条面试经历（Java岗）
跳槽时时刻刻都在发生,但是我建议大家跳槽之前,先想清楚为什么要跳槽.切不可跟风,看到同事一个个都走了,自己也盲目的开始面试起来(期间也没有准备充分),到底是因为技术原因(影响自己的发展,偏移自己规划的 ...
- element-ui Upload 上传组件源码分析整理笔记（十四）
简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...
- maven 学习---使用Maven创建Web应用程序项目
在本教程中,我们将演示如何使用 Maven 创建一个 Java Web 项目(Spring MVC). 用到的技术/工具: Maven 3.3.3 Eclipse 4.3 JDK 8 Spring 4 ...
- vue学习指南：第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...