设置“速度”时，jquery addclass/removeclass 并不总是有效（鼠标事件）答案

【问题标题】：jquery addclass/removeclass doesn't always work when "speed" is set (mouse events)设置“速度”时，jquery addclass/removeclass 并不总是有效（鼠标事件）
【发布时间】：2009-03-03 17:41:51
【问题描述】：

在 css 类“employee_mouseover”中，我将 bg 颜色设为红色。

        $(".employee").bind("mouseenter", function() {
            $(this).addClass("employee_mouseover");
        });
        $(".employee").bind("mouseleave", function() {
            $(this).removeClass("employee_mouseover");
        });

这很好用。

但是，当我设置一个速度让它看起来更漂亮时，当我快速执行 mouseenter+mouseleave 时，元素保持红色；

    $(".employee").bind("mouseenter", function() {
        $(this).addClass("employee_mouseover", "fast");
    });
    $(".employee").bind("mouseleave", function() {
        $(this).removeClass("employee_mouseover", "fast");
    });

这效果不好，除非我非常缓慢地进出元素。

有没有更好的方法来做到这一点？

提前致谢。

【问题讨论】：

我什至不知道 removeClass 和 addClass 接受了第二个参数的速度。
如何慢慢删除一个类？
也许 jquery 足够聪明，可以缓慢执行 css 更改效果？
duration 参数是 jQuery UI 特有的，这个问题的标签已相应更新。

标签： jquery jquery-ui

【解决方案1】：

来自jQuery UI docs：

jQuery UI 效果核心扩展了基类 API，以便能够在两个不同的类之间制作动画。以下方法已更改。它们现在接受三个附加参数：速度、缓动（可选）和回调。

所以@Thomas 必须在他的页面上同时包含 jQuery 和 jQuery UI 库，从而启用 addClass 和 removeClass 的速度和回调参数。

【讨论】：

【解决方案2】：

可以，但是需要安装jquery coloranimate plugin。然后你可以使用下面的代码慢慢改变颜色：

$(".employee").bind("mouseenter", function() {
  $(this).animate({backgroundColor: "#bbccff"}, "slow");

});
$(".employee").bind("mouseleave", function() {
  $(this).animate({backgroundColor: "white"}, "slow");
});

【讨论】：

感谢您的建设性回答。其他回复在教育方面也很有帮助，但这个回复给了我一种实现我想要做的事情的方法。谢谢！

【解决方案3】：

您使用了错误的事件。你想要：

$(".employee").hover(function() {
 $(this).addClass("employee_mouseover");
}, function() {
 $(this).removeClass("employee_mouseover");
});

添加或删除类没有速度参数。

【讨论】：

【解决方案4】：

是的，用 CSS 做！

.employee:hover{background:pink;}

另外，there is no speed parameted for addClass，速度只存在于效果。

【讨论】：

这不能让我设置速度让它看起来很漂亮，不是吗？此外，我有时需要在用户执行操作时启用/禁用鼠标事件..
"另外，addClass 没有速度参数，速度只存在于效果。"这似乎不是真的，因为当我慢慢做时它会起作用。我在原始帖子中描述了这两件事。
@Thomas：其实是真的。
@Thomas：它可以工作，但它显然是一个无法正常工作的未记录功能。
它根本不可能工作。类是元素具有或不具有的东西；没有像补间位置或混合颜色这样的中间状态。无论您看到什么，这都不是一个缓慢的班级过渡。

【解决方案5】：

removeClass (http://docs.jquery.com/UI/Effects/removeClass) 有一个持续时间参数，但它在 FF 中不起作用。我的代码有什么问题吗？我是 JQuery 的新手。我现在要试试动画功能。

我在这里尝试做的是使用锚点，然后在单击锚点时突出显示目标锚点位置。这是我的 HTML 代码 -

<ul>
                <li><a href="#caricatures">Caricatures</a></li>
                <li><a href="#sketches">Sketches</a></li>
</ul>

我的目的地锚是 -

<a href="#" id="caricatures"><h3>Caricatures</h3></a>

这是我可以改变背景颜色的地方。

这是我的 CSS -

<style>
            .spotlight{
                background-color:#fe5;
            }
</style>

这是我的 JQuery 代码 -

<script>
    $('a[href$="caricatures"]').click(function(){
        $('a[id="caricatures"] h3').addClass("spotlight");
        $('a[id="caricatures"] h3').removeClass("spotlight",1000);
    });
    </script>

【讨论】：

我阅读了 animate() 方法文档 (api.jquery.com/animate)，它说 - “宽度、高度或左侧可以设置动画，但背景颜色不能设置。”。这就是我的 .animate() 不起作用的原因。 switchClass 也不起作用。而且我不想toggleClass。
对我上述评论的更正 - 我在另一个示例中尝试为 backgroundColor 设置动画，它已经奏效了。这让我很震惊，因此有了这个新评论。所以现在我很困惑为什么文档说背景颜色不起作用。他们的意思是说“背景颜色”不起作用，但“背景颜色”可以吗？
我终于可以让我的代码工作了。感谢大家的回应。我在我的代码中只添加了一行 - 我包含了“jquery-ui-1.8.6.custom.min.js”脚本文件，我上面的代码工作得很好。没有提及在 addClass (api.jquery.com/addClass) 的文档/示例中包含此脚本。我没有意识到它是 JQuery UI 的一部分。

【解决方案6】：

addClass 用于向元素添加 CSS 类。如果您希望通过补间来更改某些 CSS 属性，那么您需要使用Effects 显式执行此操作。

你的代码：

$(this).addClass("employee_mouseover", "fast");

将employee_mouseover 和fast 两个类添加到this，这显然不是你想要的。

【讨论】：

认为您在那里粘贴了错误的代码。此外，“快速”被忽略。
哇，你完全正确。就是这样。 :) 猜猜它是一个逗号分隔的字符串。

【解决方案7】：

这是我使用 jQuery 的过渡：

$("#layoutControl .actionList").click(
    function(){
        $("#assetsContainer").fadeOut("fast",function(){
            $(this).removeClass("assetsGrid").addClass("assetsList");
            $("#iconList").attr("src", "/img/bam/listIcon.png");
            $("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
            $(this).fadeIn("fast");
        });
    }
);

【讨论】：

【解决方案8】：

即使你正确地包含了 JqueryUI，当你使用“duration”参数时，这些似乎都会在 FF 之外失败。导致 IE 中的 JS 错误。我会坚持 animate() 这很糟糕。

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

jqueryui 网站上的文档中没有说明这一点。

【讨论】：

【解决方案9】：

$(".employee").hover(function() {
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
    $(this).stop().animate({ backgroundColor: "white" }, "slow");
});

【讨论】：

【解决方案10】：

您可以使用 CSS3 过渡来实现此效果。

a:hover {
    color: red;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

a:link, a:visited {
    color: white;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

【讨论】：

【解决方案11】：

另外，addClass没有速度参数，速度只存在于效果。

正确。

但也许这个插件可能会有所帮助：

animate-to-class

【讨论】：