анимация 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});
  });

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

1. анимация плавно между красным и синим.
2. нет анимации "overqueue-ing", когда пользователь быстро перемещает мышь в div и из него.
3. если пользователь перемещает мышь / в то время как анимация все еще играет, она правильно облегчает между текущим состоянием "на полпути" и новым состоянием "цель".

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