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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
JS继承最简单的理解方式
Mar 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jQuery Position方法使用和兼容性
2017/08/23 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
毕业生在校学习的自我评价分享
2013/10/08 职场文书
员工入职担保书范文
2014/04/01 职场文书
2014年居委会工作总结
2014/12/09 职场文书
圣诞节开幕词
2015/01/29 职场文书
佛光寺导游词
2015/02/10 职场文书
社区安全温馨提示语
2015/07/14 职场文书
车间班组长竞聘书
2015/09/15 职场文书