菜单悬停，淡入淡出效果

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 color lib HERE。而且你还需要删除你在css中设置的：悬停背景颜色。

希望这有帮助。

Answer 2

您只需要几行代码和jquery color animations plugin：

$('.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');
});