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

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 2

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

Yes, do it in CSS!

.employee:hover{background:pink;}

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

Answer 5

There is a duration parameter for removeClass (http://docs.jquery.com/UI/Effects/removeClass), but it is not working in FF. Is there anything wrong with my code? I am new to JQuery. I am going to try animate function now.

What I am trying to do here is use the anchors and then highlight the destination anchor location when the anchor is clicked. Here's my HTML code -

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

My destination anchor is -

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

This is where I might the background color to change.

Here's my CSS -

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

Here's my JQuery code -

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

Answer 6

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 7

Here's my transition with 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");
        });
    }
);