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 unneeded styles on my table row when complete (below)

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

These styles are messing with those defined in my CSS file (specifically some hover styles). Does anyone have a recommendation on removing them. I'm using jQuery 1.3.1. I've tried adding a

.attr('style', '');

to the end of the chain, but that didn't work. Any other ideas?

Answer 1

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

Apparently the addClass method can take a duration. Make classes for your animations and give this a try. You should be able to removeClass if needed.

Answer 2

Like Stuard said, using class seem a good idea.

But if you want to do what you said: (certainly a bad idea...)

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

Answer 3

For what you want to do i think is more appropriate to use jquery UI and pulsate/highlight effect :)