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 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
微信小程序实现自定义底部导航
Nov 18 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
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
用javascript实现倒计时效果
2021/02/09 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
分析python切片原理和方法
2017/12/19 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
Django显示可视化图表的实践
2021/05/10 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
Win2008系统搭建DHCP服务器
2022/06/25 Servers
java中如何截取字符串最后一位
2022/07/07 Java/Android
Django中celery的使用项目实例
2022/07/07 Python