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 相关文章推荐
正则表达式语法
Oct 09 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
详解vue项目打包步骤
Mar 29 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 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正则表达式(regar expression)
2011/09/10 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python文件操作整理汇总
2014/10/21 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python字典改变value值方法总结
2019/06/21 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
幼儿园园长新年寄语2015
2014/12/08 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL