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 docs：

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

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

Answer 2

你正在使用错误的事件。你想要：

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

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

Answer 3

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

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

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

Answer 4

是的，用CSS做吧！

.employee:hover{background:pink;}

此外，there is no speed parameted for addClass，速度仅适用于效果。

Answer 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>

Answer 6

addClass用于向元素添加CSS类。如果您希望通过补间更改某些CSS属性，则需要使用Effects显式更改。

您的代码：

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

将employee_mouseover和fast两个类添加到this，这显然不是您所追求的。

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

Answer 8

此外，addClass没有速度参数，速度仅适用于效果。

正确。

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

animate-to-class

Answer 9

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

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

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

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

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

在jqueryui网站的文档中没有这方面的注释。

Answer 10

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

Answer 11

您可以使用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;
}

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

11 个答案: