анимация addClass / removeClass с помощью jQuery

Я использую jQuery и jQuery-ui и хочу анимировать различные атрибуты на разных объектах.

Чтобы объяснить эту проблему, я упростил ее до одного div, который меняется от синего до красного, когда пользователь перебирает его.

Я могу получить поведение, которое я хочу при использовании animate(), однако при этом стили, которые я анимация, должны быть в коде анимации и поэтому отделены от моей таблицы стилей. (см. пример 1)

Альтернативой является использование addClass() и removeClass(), но я не смог воссоздать точное поведение, которое я могу получить с помощью animate(). (см. пример 2)

---

Пример 1

Посмотрим на код, который у меня есть с animate():

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

отображает все поведение, которое я ищу:

• Анимирует плавно между красным и синим.
• Отсутствие анимации "переизбытка", когда пользователь быстро перемещает свою мышь в и из div.
• Если пользователь перемещает мышь в/в, пока анимация все еще воспроизводится, она корректно работает между текущим состоянием "halfway" и новым состоянием "цель".

Но поскольку изменения стиля определены в animate(), я должен изменить значения стиля там и не могу просто указать его на мою таблицу стилей. Эта "фрагментация" того, где определены стили, - это то, что меня действительно беспокоит.

---

Пример 2

Вот моя лучшая попытка с использованием addClass() и removeClass (обратите внимание, что для работы анимации вам нужно jQuery-ui):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

Это показывает как свойство 1., так и 2. моих первоначальных требований, однако 3 не работает.

Я понимаю причину этого:

При анимации addClass() и removeClass() jQuery добавляет временный стиль к элементу и затем увеличивает соответствующие значения до тех пор, пока они не достигнут значений предоставленного класса, и только тогда он фактически добавит/удалит класс.

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

Однако, когда анимация выполнена на полпути, она еще не добавила новый класс, и поэтому с этим решением цвет переходит к предыдущему цвету, когда пользователь перемещает свою мышь до завершения анимации.

---

В идеале я хочу сделать что-то вроде этого:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Где getClassContent просто вернет содержимое предоставленного класса. Ключевым моментом является то, что таким образом мне не нужно сохранять определения стилей повсюду, но они могут содержать их в классах в моей таблице стилей.