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 引起的安全问题
Dec 27 Javascript
js tab效果的实现代码
Dec 26 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php数据访问之查询关键字
2016/05/09 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
详解vue 项目白屏解决方案
2018/10/31 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
最新大学生自我评价
2013/09/24 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
创业计划书之废品回收
2019/09/26 职场文书