具有淡入淡出效果的菜单悬停答案

【问题标题】：Menu hover with fade effect具有淡入淡出效果的菜单悬停
【发布时间】：2012-06-14 07:52:03
【问题描述】：

我有这个菜单结构：

一切正常。但我想要，悬停效果通过 jQuery 淡化。我该怎么做？

【问题讨论】：

【解决方案1】：

您可以使用带有过渡的 css3 来实现这一点，如下所示：

.menu-item
{
    // In the transition you define the property that 
    // you want a transition attached to and the duration
    transition: background .5s;
    -moz-transition: background .5s; /* Firefox 4 */
    -webkit-transition: background .5s; /* Safari and Chrome */
    -o-transition: background .5s; /* Opera */
}

.menu-item:hover
{
    background: #CCC; // Or whatever color you choose
}

来源：http://www.w3schools.com/css3/css3_transitions.asp

编辑

您的问题的 jQuery 解决方案是：

$(document).ready(function(){
    $('#right_menu li').hover(function() {
        $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
    },
    function() {
        $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
    });
});

但是，您确实需要包含找到 HERE 的 jQuery 颜色库。而且您还需要删除您在 css 中设置的 :hover 背景颜色。

希望这会有所帮助。

【讨论】：

通过 jQuery 做这件事是不必要的，而且效率低下
但如果目标浏览器不支持css3则需要。
如果人们使用旧版浏览器，他们会选择不支持网络提供的新技术，例如 css3。我不明白为什么简单的背景悬停是不够的。但不管怎样，我都会研究一个 jQuery 解决方案。

【解决方案2】：

你只需要几行代码就可以了，jquery color animations plugin:

$('.links yan-menu li a ').hover(function() {
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});

当然，您必须删除 css 代码并将代码正确添加到页面中

【讨论】：

【解决方案3】：

正如严坤所说，你必须包含jquery颜色动画库：http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js

我改进了插入 .stop() 语句的代码，以避免鼠标多次悬停时出现循环。

$('.links yan-menu li a ').hover(function() {
    $(this).stop();
    $(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
    $(this).stop();
    $(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});

【讨论】：