3 
<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/

4

4 回答 4

1

给你

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

小提琴

于 2013-05-21T19:49:15.517 回答
1

添加：

transition: all 1s;

到 .active 类中的 css 代码

这是一个例子

有关更多信息，请参阅参考：这里

于 2013-05-21T19:32:30.143 回答
1

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 是一个试图确定用户意图的插件......就像一个水晶球，只有鼠标移动！它类似于 jQuery 的悬停方法。然而，hoverIntent 不是立即调用 handlerIn 函数，而是等到用户的鼠标速度足够慢后再进行调用。为什么？延迟或防止意外触发动画或 ajax 调用。简单的超时适用于小区域，但如果您的目标区域很大，则无论意图如何，它都可能执行。这就是 hoverIntent 进来的地方......

于 2013-05-21T19:34:39.303 回答
0

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

于 2013-05-21T20:06:56.567 回答