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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
VUE实现一个分页组件的示例
Sep 13 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
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作为Shell脚本语言使用
2006/10/09 PHP
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
js实现移动端轮播图
2020/12/21 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
浅析python中while循环和for循环
2019/11/19 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
python excel和yaml文件的读取封装
2021/01/12 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
北京振戎融通Java面试题
2015/09/03 面试题
ktv筹备计划书
2014/05/03 职场文书
孟佩杰观后感
2015/06/17 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Python+Appium新手教程
2021/04/17 Python
python 如何用terminal输入参数
2021/05/25 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers