jquery addclass/removeclass doesn't always work when "speed" is set (mouse events)

Question

In css class "employee_mouseover" I make the bg color red.

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

This works fine.

But, when I set a speed to make it look more pretty, the element stays red when I quickly do a mouseenter+mouseleave;

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

This doesn't work well, unless I move in and out of the element very slowly.

Is there a better way to do this?

Thanks in advance.

Answer 1

Yes, do it in CSS!

.employee:hover{background:pink;}

Also, there is no speed parameted for addClass, speed only exists for effects.

Answer 2

addClass is for adding CSS classes to elements. If you're looking to change some CSS property by tweening, then you need to do that explicitly using Effects.

Your code:

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

Will add two classes, employee_mouseover and fast to this, which is obviously not what you're after.

Answer 3

You're using the wrong event. You want:

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

And there's no speed argument on add or remove class.

Answer 4

It can be done, but you need to install the jquery coloranimate plugin. Then you can use the code below to change the color slowly:

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

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

Answer 5

from the jQuery UI docs:

The jQuery UI effects core extends the base class API to be able to animate between two different classes. The following methods are changed. They now accept three additional parameters: speed, easing (optional), and callback.

So @Thomas must have included both jQuery and jQuery UI libraries on his page, enabling the speed and callback parameters to addClass and removeClass.

Answer 6

Also, there is no speed parameted for addClass, speed only exists for effects.

Correct.

But perhaps this Plugin might help:

http://plugins.jquery.com/project/animate-to-class

Answer 7

Even if you include JqueryUI properly, these all appear to fail outside of FF when you use the "duration" parameter. Causes JS errors in IE. I would stick to animate() which sucks.

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

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

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

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

There is no note of this in the docs on the jqueryui site.

Answer 8

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