动画悬停和活动类问题 - jQuery

Question

我对 jQuery 比较陌生，所以我真的不知道下面的问题是否是由我看不到的非常琐碎的事情引起的。无论如何，我苦苦寻找答案，但一无所获。我希望你能帮助我！

我一直在尝试编写一个简单的选项卡式菜单，以补充我的滑动内容。我希望标签有一些背景，在悬停时会淡入，并且活动类被删除并相应地添加到您单击的标签中。

这是我的淡化效果代码，使用 jQuery 颜色插件：

$('#menu a').not('.active').hover(function(){
        $(this).stop().animate({backgroundColor: '#FCEA77', 'opacity': '0.3'}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', 'opacity': '1'}, 'slow');
});

这是活动类的代码：

$('a').click(function () {  
$(".active").removeClass("active");  
$(this).addClass("active");
}); 

两者都可以自己工作，但是当我尝试让它们同时工作时，会发生淡入淡出效果，并且当您单击另一个选项卡时，活动类将从当前类中删除，但单击的选项卡没有t 获得活动课程。知道是什么原因造成的吗？如果这真的很简单明了，我很抱歉。

哦，这是我的 CSS：

#menu { padding: 10px 0 0 0;
    height: 25px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    position:relative;
}

#menu a{
    color:white;
    padding: 10px;
    text-decoration: none;
}

#menu a.active {
    color:black;
    background:#FCEA77;
}

还有我的 HTML：

       <div id="menu">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#info">Info</a>
        <a href="#team">Team</a>
        <a href="#gallery">Gallery</a>
        </div>

非常感谢您！

Answer 1

this 是你想要的吗？

我看到的问题是.animate 将样式直接添加到<a href> 标记，根据正常的CSS 规则覆盖.active 类中的任何样式。

最简单的解决方案是将!important 添加到active 类样式中：

#menu a.active {
    color: black !important;
    background: #FCEA77 !important;
}​

Answer 2

1. 从动画中的属性中删除所有单引号
2. 使用.on('mouseenter', ...) 和.on('mouseleave', ...) 而不是.hover(...)，否则只会定位到文档就绪时未激活的元素
3. 在click 回调中添加$(this).trigger('mouseleave');

例如here

Answer 3

试试这个

    $('#menu a').hover(function(){
       if(!$(this).hasClass('active')) {
            $(this).stop().animate({'backgroundColor': '#FCEA77', 'opacity': '0.3'}, 'slow');
            }, function() {
              $(this).stop().animate({'backgroundColor': '#000000', 'color':'#ffffff', 'opacity':     '1'}, 'slow');
        }
     }

你也可以查看这个例子Demo

Answer 4

我现在看到了问题。 Opacity 根本不需要引号，而其他 CSS 规则确实需要它。原来如此：

$('#menu a').not('.active').hover(function(){
    $(this).stop().animate({backgroundColor: '#FCEA77', opacity: 0.3}, 'slow');
}, function() {
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', opacity: 1}, 'slow');
});