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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
js 获取时间间隔实现代码
May 12 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
layui的select联动实现代码
Sep 28 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
国际花店:Pickup Flowers
2020/04/10 全球购物
应届生求职信
2014/05/31 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
单位介绍信格式
2015/01/31 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS