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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
js实现橱窗展示效果
Jan 11 Javascript
jQuery实现带进度条的轮播图
Sep 13 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python BS4库的安装与使用详解
2018/08/08 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
个人简历自荐信
2013/12/05 职场文书
创业计划书六个要素
2013/12/26 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
煤矿安全协议书
2014/08/20 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
庆七一活动简报
2015/07/20 职场文书
java实现web实时消息推送的七种方案
2022/07/23 Java/Android