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插件 tabBox实现代码
Feb 09 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python基础之文件读取的讲解
2019/02/16 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Django框架models使用group by详解
2020/03/11 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
幼儿园植树节活动总结
2014/07/04 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL