这篇随笔的来源于【教程】jQuery打造动态渐变按钮 这篇博文，在下怀着学习的态度，动手去做去理解，并记录下来，和大家分享！
1.看看自己的效果显示：
2.html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery打造动态渐变按钮</title> <style type="text/css" > .button { background: url("http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif") top no-repeat; display: block; height: 80px; width: 200px; text-indent: -9999px; } /*不需要在设置:hover的样式，而是设置span.hover的样式*/ .button span.hover { position: absolute; display: block; width: 200px; height: 80px; text-indent: -9999px; background: url("http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif") bottom no-repeat; } .content { margin: 0 auto; width: 666px; } .jsbutton { background: #F00; display: block; height: 80px; width: 200px; text-indent: -9999px; } /*不需要在设置:hover的样式，而是设置span.hover的样式*/ .jsbutton span.hover { /*注意要使用绝对定位*/ position: absolute; display: block; width: 200px; height: 80px; text-indent: -9999px; background: #00F; } </style> <script type="application/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"></script> <script type="application/javascript"> $(document).ready(function() { //把文本包含到<span>元素中，再附加到.jsbutton中 $(".jsbutton,.button").wrapInner('<span class="hover"></span>').css('textIndex','0').each(function() { //先设置<span>元素中全透明，再添加鼠标悬停事件 $("span.hover").css('opacity',0).hover(function() { $(this).stop().fadeTo(650,1); //渐变至不透明 },function(){ $(this).fadeTo(650,0);//渐变至全透明 }); }); }); </script> </head> <body> <div class="content"> <div>渐变效果</div> <div><a class="button">编程之路</a></div> <br /> <br /> <div>颜色渐变</div> <div><a class="jsbutton">编程之路</a></div> </div> </body> </html>
3.个人理解：
其实就是先应用的jQuery的wrapInner() 方法把"<span class="hover"></span>"添加到指定样式的a标签中,然后使用each() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!
本文转自叶超Luka博客园博客，原文链接：http://www.cnblogs.com/yc-755909659/archive/2013/04/23/3038274.html，如需转载请自行联系原作者
