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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
浅谈Vue.js
Mar 02 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
微信小程序实现搜索功能
Mar 10 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
phpize的深入理解
2013/06/03 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP整合PayPal支付
2015/06/11 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Python中字典映射类型的学习教程
2015/08/20 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python实现随机梯度下降法
2020/03/24 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python下载的库包存放路径
2020/07/27 Python
深入分析python 排序
2020/08/24 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
什么是serialVersionUID
2016/03/04 面试题
我的网上商城创业计划书
2013/12/26 职场文书
公司中秋节活动方案
2014/02/12 职场文书
党员公开承诺书
2014/03/25 职场文书
任命书格式模板
2015/09/22 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书