JQuery анимировать CSS, вернуть состояние при наведении - PullRequest
Новая
       6

JQuery анимировать CSS, вернуть состояние при наведении

1 голос
/ 27 октября 2010

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

Когда анимация закончится, я хочу вернуть свои состояния CSS: hover.Возможно ли это, или я потерял оригинальный 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 + " &raquo;")
    .animate({backgroundColor: "#4188FB"}, 2000, "swing", function() {
        // set back hover state
        $("a.btn:hover").css("background-color", "#FFCC00");
    });
})

1 Ответ

3 голосов
/ 27 октября 2010

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

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

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

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

...