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初学困境—js初学
Dec 29 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 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
php的curl实现get和post的代码
2008/08/23 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python 读取、写入txt文件的示例
2020/09/27 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
党员公开承诺事项
2014/03/25 职场文书
中学生励志演讲稿
2014/04/26 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
五心教育心得体会
2014/09/04 职场文书
北京英文导游词
2015/02/12 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS