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

问题

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.

回答1:

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

回答2:

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.

回答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.

回答4:

Yes, do it in CSS!

.employee:hover{background:pink;}

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

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

回答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.

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

回答8:

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.

回答9:

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

回答10:

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

回答11:

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

Correct.

But perhaps this Plugin might help:

animate-to-class

来源：https://stackoverflow.com/questions/607386/jquery-addclass-removeclass-doesnt-always-work-when-speed-is-set-mouse-event

标签

jquery

jquery-ui