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

Posted 2023-05-08

【中文标题】动画悬停和活动类问题 - jQuery

【英文标题】：Animated hover and active class issue - jQuery

【发布时间】：2012-06-18 16:07:52

【问题描述】：

我对 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>

非常感谢您！

【问题讨论】：

看到您的 backgroundColor 和您的 'opacity' 关键字有什么不同吗？ （引用？）

嗯，是的，既然你这么说......但如果我同时拥有它们或根本没有它们，它并没有真正改变任何东西。应该吗？

将它们从您的关键字中删除，但将它们保留在值中。喜欢：背景颜色：'红色'，不透明度：'0.3'

我想我不小心删除了一条询问我到底想做什么的评论：基本上我只想要一个漂亮的悬停效果，但是当我使用它时，我的活动类切换代码不起作用，我不知道为什么。

【参考方案1】：

this 是你想要的吗？

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

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

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

【讨论】：

是的！有用！就是这样，太感谢你了！ :D 如果我也可以这么大胆地问这个问题：是否可以编码当您单击它时更改为活动的选项卡，当您将鼠标悬停在它上面时不会淡出？这不是很重要，但我想我可能会问。

当然，只需将opacity: 1.0 !important; 添加到active 类：jsfiddle.net/PaJS6/12

非常欢迎 - 不要忘记accept your favorite answers。

【参考方案2】：

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

例如here

【讨论】：

哦，这很好用！非常感谢，这就是我想要的 200%！ :D

【参考方案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

【讨论】：

感谢您的回答，但这并没有真正起作用。如果选项卡的类处于活动状态，它不应该被动画化，这就是我放入 .not 的原因。我只想让活动类切换到被单击的选项卡，但它没有出于某种原因，当我使用 .animate 时不要这样做。

【参考方案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');
);

【讨论】：

谢谢！很高兴知道，但这并没有真正解决我的问题。悬停动画仍然可以很好地工作，但是当您单击选项卡时，活动类不会切换...