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 相关文章推荐
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
在vue中created、mounted等方法使用小结
Jul 21 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
discuz安全提问算法
2007/06/06 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
使用JS获取页面上的所有标签
2018/10/18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
vue 子组件和父组件传值的示例
2020/09/11 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Django开发中复选框用法示例
2018/03/20 Python
python绘制多个曲线的折线图
2020/03/23 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python打印不合法的文件名
2020/07/31 Python
python打包多类型文件的操作方法
2020/09/21 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
学校元旦晚会方案
2014/02/19 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
党支部特色活动方案
2014/08/20 职场文书
硕士学位论文评语
2014/12/31 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
公司年会主持词范文!
2019/05/07 职场文书