jquery - 将 css 悬停转换为 jquery 悬停

Question

我正在构建一个具有悬停效果的网站。请参阅http://vitaminjdesign.com/index.html并查看右下角的服务部分。我正在使用 :hover 来更改背景颜色。我想使用 jquery 通过优雅的淡入淡出来达到相同的结果。这是我的 html:

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(使用不同的图像和文本重复 6 次)

基本上，当 .iconrow 滚动时，我希望背景从无更改为背景颜色:#cccccc;当它被滚掉时，又回到无。

Answer 1

您需要 jquery 彩色动画插件:http://plugins.jquery.com/project/color

然后是这样的代码

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

编辑:

根据 dcneiner 的评论，如果您希望最终颜色为无，则必须向动画添加回调函数，以在动画完成后将颜色更改为“无”。我猜动画为“无”是未定义的。您可以将 #fff 更改为接近背景的颜色，以帮助平滑最终过渡。

动画签名是:

animate(params, [duration], [easing], [callback])