title: :hover property overriden after jquery effect, how to get it back?
body: <p>I have an animate function...</p>
  
  <pre>
      function flashGreen(e) {
                  backg = e.css('backgroundColor');
                  e.animate({ backgroundColor: "#5ccc96" }, 1000);
                  e.animate({ backgroundColor: backg }, 500);
              }
  </pre>
  
  <p>with a css like so</p>
  
  <pre>
  .container {
      padding:5px;
      background:#eaeaea;
  }
  .containerr:hover {
      border:1px #558ecb solid;
      background:#7dcdf2;
      padding:4px;
  }</pre>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>How do I get my background color hover to work after calling animate on the backgroundColor.</p>