jQuery анимировать CSS, установить состояние зависания

Question

У меня есть кнопка обновления, на которую я хочу обратить внимание при обновлении моего контента. Я делаю это с изменением цвета анимации и добавлением некоторых символов стрелки.

Когда анимация закончена, я хочу, чтобы мой CSS: зависает.
Возможно ли это или я теряю оригинальный CSS и я должен сбросить их с JQuery-х 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

Это может быть не самым элегантным решением, но вы можете попробовать следующее:

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

в вашей функции обратного вызова $.animate().

Редактировать: Я подозреваю, что вы теряете свои стили :hover, потому что $.animate() использует встроенные стили, которые устанавливаются после правил таблицы стилей; таким образом, они имеют приоритет над определенными стилями в таблице стилей.