jQuery animer CSS, mettre en arrière état hover

Question

J'ai un bouton de mise à jour sur lequel je veux attirer l'attention lors de la mise à jour de mon contenu. Je fais ceci avec un fondu de couleur d'animation et en ajoutant quelques caractères de flèche.

Lorsque l'animation est terminée, je veux récupérer mon CSS: retour des états.
Est-ce possible ou que je perds le CSS original et dois-je réinitialiser ces derniers avec jQuery de hover()

Fiddle: http://jsfiddle.net/K6fd2/

CSS

a.btn { padding: 5px 20px; color: white; background-color: #4188FB; } 
a.btn:hover { background: #FFCC00;} 

HTML

<a href="#" class="btn">Update</a> 
<br /><br /> 
<a href="#" class="change">change content</a> 

JS

var oriBtnTxt = $(".btn").html(); // store original text 

$(".change").click(function() { 
    $(".btn") 
    .css("background-color","#FFCC00") 
    .html(oriBtnTxt + " »") 
    .animate({backgroundColor: "#4188FB"}, 2000, "swing", function() { 
     // set back hover state 
     $("a.btn:hover").css("background-color", "#FFCC00"); 
    }); 
}) 

Answer 1

Cela peut ne pas être la solution la plus élégante, mais vous pouvez essayer ce qui suit:

$(this).removeAttr('style'); 

au sein de votre fonction de rappel $.animate().

Editer: Je suppose que vous perdez vos styles :hover car $.animate() utilise des styles en ligne, qui sont définis après l'évaluation des règles de feuille de style; ils ont donc priorité sur les styles définis dans la feuille de style.