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

StackOverflow https://stackoverflow.com/questions/607386

  •  03-07-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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

OTHER TIPS

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.

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.

Yes, do it in CSS!

.employee:hover{background:pink;}

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

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>

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.

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

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.

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

You can use CSS3 transitions to achieve this effect.

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

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

Correct.

But perhaps this Plugin might help:

animate-to-class

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top