jQuery实现字体颜色渐变效果的方法


Posted in jQuery onMarch 29, 2017

本文实例讲述了jQuery实现字体颜色渐变效果的方法。分享给大家供大家参考,具体如下:

jQuery不允许css属性值为非数字的属性进行动画处理,

比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行,

因此如果想实现颜色渐变的效果需要animate()外的其他方法,示例如下

方法1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
</head>
<body>
  <div class="b1" style="font-size: 50px;font-weight: bold;position: absolute;">BBB</div>
  <div class="b2" style="font-size: 50px;font-weight: bold;position: absolute;color: #f60;display: none;">BBB</div>
</body>
<script type="text/javascript">
$(function(){
  $('.b1').hover(function(){
    $('.b2').fadeIn(500);
  })
})
</script>
</html>

设置一个和b1完全相同位置的b2并隐藏,添加hover事件使b2渐显,用这个笨方法可模拟color渐变效果

方法2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  div{
    color: red;
    transition: color 1s;
  }
  div:hover{
    color: yellow;
  }
  </style>
  <script type="text/javascript" src="d:/jquery-3.1.0.js"></script>
</head>
<body>
<div class="wrapper">1111</div>
<script type="text/javascript">
</script>
</body>
</html>

利用css3的transition方法,实现鼠标悬浮后,颜色渐变动画效果

jQuery 相关文章推荐
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
jQuery中的deferred使用方法
Mar 27 #jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
You might like
php4的session功能评述(三)
2006/10/09 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP SOCKET编程详解
2015/05/22 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python 错误和异常代码详解
2018/01/29 Python
Python装饰器用法实例总结
2018/02/07 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
几个Linux面试题笔试题
2012/12/01 面试题
汉语言文学职业规划
2014/02/14 职场文书
幼儿园运动会口号
2014/06/07 职场文书
调研座谈会发言材料
2014/08/23 职场文书
竞聘自述材料
2014/08/25 职场文书
教师节学生演讲稿
2014/09/03 职场文书
运动会加油稿100字
2014/09/19 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
大学生读书笔记范文
2015/07/01 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python实现简单石头剪刀布游戏
2021/10/24 Python