jQuery实现的文字hover颜色渐变效果实例


Posted in Javascript onFebruary 20, 2016

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

<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("a").hover(function(){
 $("a").animate({width:"80%",height:"40%",fontSize:"100px"},1600,function(){
 $("a").animate({color:"#FFFFFF"},1600);
 });
 },function(){
 $("a").animate({color:"blue"},1600,function(){
 $("a").animate({width:"100px",height:"20px",fontSize:"14px"},1600);
 });
 });
});
</script>
</head>
<body>
<a href="#" style="width:100px;height:20px;font-size:14px;border:red 1px solid;">我不是淡入淡出</a>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue移动端路由切换实例分析
May 14 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
javascript每日必学之循环
Feb 19 #Javascript
jQuery实现简单的DIV拖动效果
Feb 19 #Javascript
You might like
三个类概括PHP的五种设计模式
2012/09/05 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python如何对链表操作
2020/10/10 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
.NET面试问题集
2015/12/08 面试题
计划生育标语
2014/06/23 职场文书
学校与家长安全责任书
2014/07/23 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
个人创业事迹材料
2014/12/30 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android