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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
JS验证码实现代码
Sep 14 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 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
c#中的实现php中的preg_replace
2009/12/21 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
公司离职证明范本
2014/01/13 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL