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操作css属性
Dec 30 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
js比较日期大小的方法
May 12 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
js实现查询商品案例
2020/07/22 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python学习小技巧总结
2018/06/10 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
怎样填写就业意向
2014/04/02 职场文书
全国文明单位申报材料
2014/05/31 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
金榜题名主持词
2015/07/02 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书