JQuery Animation leaves unnecessary styles

Question

When I run the following jQuery animation sequence:

$('#task').animate({ backgroundColor: fadeColor }, 50)
          .animate({ opacity: 1.0 }, 1000)
          .animate({ backgroundColor: originalBG }, 1000);

It leaves unnecessary styles in my table row at the end (below)

<tr id="task29" onclick="TaskEdit('29');" style="background-color: rgb(255, 255, 255); opacity: 1;">

These styles interact with those defined in my CSS file (in particular, some hover styles). Anyone have a recommendation on how to fix them. I am using jQuery 1.3.1. I tried adding

.attr('style', ''); 

to the end of the chain, but it didn’t work. Any other ideas?

Answer 1

For what you want to do, I find it more appropriate to use jQuery UI and ripple / highlight effect :)

Answer 2

http://docs.jquery.com/UI/Effects/addClass

-, addClass . . Class .

Answer 3

, .

But if you want to do what you said: (of course, a bad idea ...)

$('#task').animate({ backgroundColor: fadeColor }, 50)
      .animate({ opacity: 1.0 }, 1000)
      .animate({ backgroundColor: originalBG }, 1000, function(){
         $(this).removeAttr('style');
      });