如何使用jQurey打造动态渐变效果(6)

Step3 - JavaScript/jQuery

通过JavaScript，我们可以让按钮更加炫酷一些，我们需要在之前基础上加一个《span》元素，作为鼠标悬停时候显示的背景层，那么HTML会在DOM加载完成后修改成为：

<span>元素在鼠标悬停前是全透明的，鼠标经过时，逐渐不透明，以达到渐变的效果，动画过程如下图：

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

至此，我们完成了JS代码，还要注意一个步骤，CSS修改，见Step4。