:hover property overriden after jquery effect, how to get it back?

Question

I have an animate function...

    function flashGreen(e) {
                backg = e.css('backgroundColor');
                e.animate({ backgroundColor: "#5ccc96" }, 1000);
                e.animate({ backgroundColor: backg }, 500);
            }

with a css like so

.container {
    padding:5px;
    background:#eaeaea;
}
.containerr:hover {
    border:1px #558ecb solid;
    background:#7dcdf2;
    padding:4px;
}

The hover works as desired before I call the flashGreen Function, but afterwards after I call the function, the background color no longer changes, but the border still appears.

What is going on? I noticed that jQuery adds a "style" attribute to my div with backgroundColor after the animate function. So I think the "style" is overriding the class properties.

How do I get my background color hover to work after calling animate on the backgroundColor.

peirix peirix · Accepted Answer · 2010-08-25T20:33:58

As you already noticed, jQuery adds a style attribute to your element. You could simply remove it after the animation is complete

e.animate({ backgroundColor: backg }, 500, function() {
    e.removeAttr("style");
});

:hover property overriden after jquery effect, how to get it back?

2 Answers