通过以上分析，我们可以写出jQuery代码如下，在DOM加载完成后，为按钮链接添加<span>层作为鼠标经过时的背景图，在为<span>元素添加鼠标悬停事件，鼠标经过时，渐变至不透明，鼠标离开时，渐变至全透明。
复制代码 代码如下:
//把文本包含到<span>元素中，再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span></span>').css('textIndent','0').each(function () {
//先设置<span>元素中全透明，再添加鼠标悬停事件
$('span.hover').css('opacity', 0).hover(function () {
$(this).stop().fadeTo(650, 1); //渐变至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //渐变至全透明
});
});
至此，我们完成了JS代码，还要注意一个步骤，CSS修改，见Step4。
Step4 - CSS修改
在纯CSS效果的示例中，我们是利用:hover伪类来实现sprite图片的切换，当我们使用jQuery后，是引入一个<span>层作为鼠标经过时背景图，所以CSS需要做如下修改：
复制代码 代码如下:
/*之前的按钮悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}
修改为
复制代码 代码如下:
/*不需要在设置:hover的样式，而是设置span.hover的样式*/
.button span.hover {
/*注意要使用绝对定位*/
position: absolute;
display: block;
width:200px;
height:80px;
background:url(bg_button.gif) bottom no-repeat;
text-indent:-9999px;
}
总结
以上我们按4个步骤实现了一个动态渐变按钮，在演示中，我还提供了一个扩展示例，您可以跟着自己实现一个，也可以下载源代码修改定制，当然，您有什么好的提议或者有什么问题，欢迎给我留言。
演示地址
下载地址
您可能感兴趣的文章: