jquery - 具有淡入淡出效果的菜单悬停

Question

我有这个菜单结构：

http://jsfiddle.net/Rochefort/szL2C/

一切都好。但我想要，悬停效果通过 jQuery 淡化。我怎样才能做到这一点？

Answer 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');
    });
});

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

希望这可以帮助。

Answer 2

您只需要几行代码和jquery 颜色动画插件：

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

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

Answer 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');
});