本文实例讲述了jquery实现的文字hover颜色渐变效果。分享给大家供大家参考，具体如下：
<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><a href="#" style="width:100px;height:20px;font-size:14px;border:red 1px solid;">我不是淡入淡出</a>
<p>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《<a target="_blank" href="http://www.jb51.net/Special/497.htm">jQuery拖拽特效与技巧总结</a>》、《<a target="_blank" href="http://www.jb51.net/Special/430.htm">jQuery常见经典特效汇总</a>》、《<a target="_blank" href="http://www.jb51.net/Special/451.htm">jQuery扩展技巧总结</a>》、《<a target="_blank" href="http://www.jb51.net/Special/75.htm">jquery选择器用法总结</a>》及《<a target="_blank" href="http://www.jb51.net/Special/89.htm">jquery常用操作技巧汇总</a>》</p>
<p>希望本文所述对大家jQuery程序设计有所帮助。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img
src="https://img.php.cn/upload/manual/001/431/639/6a21619eac924328.png" alt="jQuery 1.12.4" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="overflowclass">jQuery 1.12.4</a>
<p class="overflowclass">jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
