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

两者都应该如何自己工作，但是当我尝试让它们同时工作时，淡入淡出效果会发生，当你点击另一个标签时，活动类会从当前的一个删除，但是点击的标签不会得到活跃的课程。知道是什么原因引起的吗？如果它真的很容易和明显，我道歉。

哦，这是我的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

试试这个

    $('#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 3

我现在看到了问题。 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');
});

Answer 4

从animate
使用.on('mouseenter', ...)和.on('mouseleave', ...)代替.hover(...)，否则只有在文档就绪时不活动的元素才会被定位
在$(this).trigger('mouseleave');回拨

click

示例here

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

4 个答案: