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

Answer 1

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

Answer 2

This is a priority/precedence issue. Since the animation gives your element a style="background-color", that is taking precedence over your CSS file. This occurs because an inline style takes precedence over any non-inline style (at least, in normal situations).

And while I was posting the explanation, peirix posted the solution.