鼠标悬停时菜单淡入效果

Question

<ul style="#" class="hmenu">
    <li class="active selected"><a href="#">Home</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
</ul>

我有一个菜单，其中有一个链接被标记为active。我使用这个脚本在悬停时切换活动类：

$('.hmenu li').on('mouseenter', function () {
    $('.hmenu li').removeClass('active');
    $(this).addClass('active');
});
$('.hmenu li').on('mouseleave', function () {
    $(this).removeClass('active');
    $('.hmenu li[class=selected]').addClass('active');
});

这段代码可以实现效果，但我想让任何链接在鼠标离开时都会淡入淡出。我无法理解这个问题 - 我该如何做到这一点？这是示例代码：http://jsfiddle.net/GdSUg/

- XTop

---

“链接应该淡入淡出”是什么意思？你的意思是背景颜色应该淡入淡出吗？有点困惑。 - bipen

是的，在mouseenter事件中，背景颜色应该淡入，而在mouseleave事件中，它应该淡出。 - XTop

Answer 1

添加以下内容：

transition: all 1s;

将CSS代码添加到类 .active 中

这是一个例子

有关更多信息，请参见参考资料：这里

- Simone Pessotto

---

你忘记在 .hmenu li 上设置 transition 以实现淡出效果。 - Kilian Stinson

@BenjaminGruenbaum 你既然已经知道答案，为什么还要问呢？:P - Fabrício Matté

@FabrícioMatté 我不只是想表达一个观点，我也想帮助Simone解决在回答中应该处理什么。如果你正在使用CSS转换效果，可以考虑放弃所有JavaScript。 - Benjamin Gruenbaum

@XTop，您需要支持哪些浏览器？ - Benjamin Gruenbaum

@BenjaminGruenbaum，是的，我只是想说你本可以更直接地指出“这在IE<=9中不起作用”，但我理解你的意思。如果使用转换，transition和:hover会是更好的解决方法，就像你提到的那样。 - Fabrício Matté

@XTop 如果是在IE<=9上，这个会失败。 - Benjamin Gruenbaum

Answer 2

CSS过渡是一种方式。另一种方式是使用jQuery UI内置的switchClass功能。使用您的演示：

$('.hmenu li').hover(function() {
    if (!$(this).hasClass('active')) $(this).switchClass('','active', 200);
}, function () {
    $(this).switchClass('active', '', 200);
});

需要。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

参考资料: http://jqueryui.com/switchClass/

当您快速悬停在需要延迟过渡（即-淡入淡出、滑动）的元素上时，可能会注意到奇怪的行为--考虑使用hoverIntent:

hoverIntent是什么？hoverIntent是一个插件，它试图确定用户的意图...像水晶球一样，只是用鼠标移动代替！它类似于jQuery的hover方法。但是，它不会立即调用handlerIn函数，而是等待用户的鼠标减速足够才会进行调用。为什么？为了延迟或防止意外触发动画或ajax调用。简单的超时对于小区域有效，但如果目标区域很大，则可能无论意图如何都会执行。这就是hoverIntent的作用...

- Josh

---

你的解决方案有奇怪的行为...尝试水平快速移动鼠标在所有链接上。 - XTop

这是悬停/鼠标进入/离开和定时淡出的固有问题。你可以通过编写/使用附加代码（http://cherne.net/brian/resources/jquery.hoverIntent.html）来解决这个问题。这不仅是我的解决方案，更是jQuery的解决方案。 :) - Josh

Answer 3

这就是它

$('.hmenu li').hover(function () {
    $(this).animate({
        backgroundColor: "#89B908"
    }, 300);
}, function () {
    $(this).animate({
        backgroundColor: "#FFF"
    }, 1);
});

Fiddle

资源相关，可能是一个网站或者一个工具。

- Benjamin Gruenbaum

---

但我需要在悬停和选定的li上添加活动类。 - XTop

http://jsfiddle.net/49ef9/ 这个也可以改变前景色。你可以保留之前的addClass。 - Benjamin Gruenbaum

:( 是的，那个答案是正确的。好吧，我恢复了那个答案。谢谢你。 - XTop

Answer 4

为了可靠地使用JQuery来动画化颜色，您需要使用JQuery Color插件（https://github.com/jquery/jquery-color）。然后，您可以执行以下操作：

var active = {
    backgroundColor: '#89B908',
    color: '#FFF'
},
inactive = {
    backgroundColor: '#FFF',
    color: '#000'
};

$('.hmenu li').on('mouseenter', function () {
    $(this).animate(active, function () {
        $('.hmenu li').removeClass('active').css(inactive);
        $(this).addClass('active').css(active);
    }).find('a').animate({
        color: '#FFF'
    });
});
$('.hmenu li').on('mouseleave', function () {
    $(this).animate(inactive, function () {
        $(this).removeClass('active');
        $('.hmenu li.selected').addClass('active').css(active);
    }).find('a').animate({
        color: '#000'
    });
});

您可以在这里找到一个可用的jsFiddle：http://jsfiddle.net/GdSUg/28/

- Rob Johnstone