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 相关文章推荐
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
Openlayers实现测量功能
Sep 25 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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下MAIL的另一解决方案
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python字符串处理实现单词反转
2017/06/14 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python学习之time模块的基本使用
2021/01/17 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
优秀学生干部推荐材料
2014/02/03 职场文书
学校校庆演讲稿
2014/05/22 职场文书
商场促销活动总结
2014/07/10 职场文书
2014年环卫工作总结
2014/11/22 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android