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 输入框数字限制插件
Nov 10 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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学习 运算符与运算符优先级
2008/06/15 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JS如何生成动态列表
2020/09/22 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python excel和yaml文件的读取封装
2021/01/12 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
两只小狮子教学反思
2014/02/05 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
军训阅兵新闻稿
2015/07/17 职场文书