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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
详解jquery和vue对比
Apr 16 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php如何获取Http请求
2020/04/30 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python pycharm的安装及其使用
2019/10/11 Python
python字符串判断密码强弱
2020/03/18 Python
Numpy 多维数据数组的实现
2020/06/18 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
科长竞聘演讲稿
2014/05/16 职场文书
个人承诺书怎么写
2014/05/24 职场文书
社区端午节活动总结
2015/02/11 职场文书
公司放假通知怎么写
2015/04/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS