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 相关文章推荐
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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-fpm 参数的深入理解
2013/06/03 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python 实现简单的FTP程序
2019/12/27 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
家具商场的活动方案
2014/08/16 职场文书
食品安全承诺书范文
2014/08/29 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
公司租房协议书范本
2014/10/08 职场文书
如何写好开幕词?
2019/06/24 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers