jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】


Posted in Javascript onMarch 15, 2017

本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法。分享给大家供大家参考,具体如下:

jquery animate函数不能处理背景色渐变,需要使用jquery.color插件

核心代码:

$(function(){
$("#cdiv").animate(


{
  
backgroundColor:'#FF0000'
  },1000

 )
})

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>背景色渐变效果</title>
</head>
<body>
  <script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.color.js"></script>
  <div id='cdiv' style='width:200px;height:100px;background-color:white'></div>
  <script>
  $(function(){
    $("#cdiv").animate(
      {
        backgroundColor:'#FF0000'
      },1000
    )
  })
  </script>
</body>
</html>

运行效果图如下:

 jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

Javascript 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
js数组的操作详解
Mar 27 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
You might like
php获取某个目录大小的代码
2008/09/10 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
extjs render 用法介绍
2013/09/11 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python多进程读图提取特征存npy
2019/05/21 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
2014年实习期工作总结
2014/11/27 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android