通过以上分析，我们可以写出jQuery代码如下，在DOM加载完成后，为按钮链接添加<span>层作为鼠标经过时的背景图，在为<span>元素添加鼠标悬停事件，鼠标经过时，渐变至不透明，鼠标离开时，渐变至全透明。

view source print?

//把文本包含到<span>元素中，再附加到.button中

$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></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需要做如下修改：

view source print?

/*之前的按钮悬停样式*/

.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个步骤实现了一个动态渐变按钮，在演示中，我还提供了一个扩展示例，您可以跟着自己实现一个，也可以下载源代码修改定制，当然，您有什么好的提议或者有什么问题，欢迎给我留言。