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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
Nuxt.js实战详解
Jan 18 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
详解vue高级特性
Jun 09 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
浅述python2与python3的简单区别
2018/09/19 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
村干部承诺书
2014/03/28 职场文书
毕业评语大全
2014/05/04 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
个人考核材料
2014/05/15 职场文书
教师个人培训总结
2015/02/11 职场文书
公司开会通知
2015/04/20 职场文书
会议主持词结束语
2015/07/03 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
在Python中如何使用yield
2021/06/07 Python