【问题标题】：adding and removing class and preventig fadeTo添加和删除类和防止淡入淡出
【发布时间】：2011-05-12 21:42:41
【问题描述】：

我创建了 3 个链接，当悬停在淡入淡出时，我还添加了一个单击事件，单击该事件会添加“活动”类，然后我想在再次单击时删除该类。我读过一些似乎暗示 removeClass 出现在 addClass 之前的帖子，但我不知道为什么。另外，当我单击链接并实现 addClass 时，我还想在此禁用 fadeTo？

如果有人能解释这些过程中的每一个，那就太好了，因为我正在尝试学习 jQuery。

代码在这里http://jsfiddle.net/kyllle/FtUdN/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个点击：

        $('#nav li a').click(function(){
            $(this).toggleClass('active')
        });

小提琴：http://jsfiddle.net/maniator/FtUdN/3/

【讨论】：

请原谅我不知道，但是这里的 .end() 是干什么用的？
@roXon，它完成了动画，我不知道为什么它在这里...好问题
@Neil 小心使用 .end(), ;) 完成动画，导致这个道具。结束当前链中最近的过滤操作，并将匹配的元素集返回到之前的状态。

【解决方案2】：

点击这里查看工作演示：http://jsfiddle.net/rVhte/

$('#nav li a').toggle(

function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $("#nav li a").unbind('mouseenter mouseleave');


}, function() {
    $(this).removeClass('active');
    $('#nav li a').hover(function() {
    $(this).fadeTo(200, 0.5).end();
}, function() {
    $(this).fadeTo(200, 1.0).end();
});


});

编辑：点击链接后禁用鼠标悬停事件

【讨论】：

为什么要停止渐变？仅在“点击”元素上禁用淡入淡出！为什么不使用 .stop() ？

【解决方案3】：

您可以使用.toggleClass 方法。在您的hover 处理程序中，您可以使用hasClass 方法来检查您是否应该淡出。

更新小提琴：http://jsfiddle.net/rfvgyhn/FtUdN/13/

【讨论】：

嗨@Rfvgyhn 单击链接时，活动颜色黑色实际上处于淡入淡出不透明度？还有 if (!$this.hasClass("active")) 是什么意思？
@Rfvgyhn：你以为：$this.stop().fadeTo(200, 0.5);
@kyllle 表示 '' if --> this (#nav li a) --> 没有类 'active'。并且，killle，使用 .stop() 来“queue false”淡入淡出动画。
感谢@roXon，尽管当我添加 $this.stop() 时，点击的链接仍然是褪色的黑色而不是 100% 的不透明度？
@killle 这不是由于 .stop()，如果您不使用停止并疯狂地悬停-取消悬停链接，动画将继续淡入淡出。为了阻止这种情况，我们使用上面提到的 .stop()。