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

这项工作，但我想改变它，以便当我悬停任何链接时，链接应该在mouseleave上淡出和淡出。

我无法理解这一点 - 我怎么能这样做？

这是小提琴：http://jsfiddle.net/GdSUg/

Answer 1

添加：

transition: all 1s;

到类.active

中的css代码

this is an example

有关详情，请参阅参考资料：Here

Answer 2

CSS过渡是一种方式。另一种方法是使用jQuery UI内置的switchClass功能。 Using your demo：

$('.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的悬停方法。但是，而不是立即调用handlerIn函数，hoverIntent等待直到在拨打电话之前，用户的鼠标放慢了速度。为什么？至延迟或防止意外发射动画或ajax电话。简单超时适用于小区域，但如果您的目标区域很大无论意图如何，它都可以执行。这就是hoverIntent的来源在...

Answer 3

你去了

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

Fiddle

Answer 4

要使用JQuery可靠地为颜色设置动画，您需要使用JQuery Color Plugin（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/

菜单在鼠标悬停时淡出

4 个答案: