设置"speed"时,jquery addclass/removeclass并不总是有效(鼠标事件)

Question

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

除非我非常缓慢地移入和移出元素,否则这不会很好.

有一个更好的方法吗？

提前致谢.

Answer 1

来自jQuery UI文档:

jQuery UI效果核心扩展了基类API,以便能够在两个不同的类之间进行动画处理.以下方法已更改.他们现在接受三个额外的参数:速度,缓动(可选)和回调.

所以@Thomas必须在他的页面上包含jQuery和jQuery UI库,为addClass和removeClass启用速度和回调参数.

Answer 2

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

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

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