Jquery addClass / removeClass анимация не работает с фоном? - PullRequest
3 голосов
/ 07 декабря 2011

Я пытаюсь сделать плавную анимацию во время изменения класса с помощью Jquery.

Но это работает только с цветом текста, а не с фоном.

Вы можете проверить это подробно :(:

http://jsbin.com/upufut

Ответы [ 2 ]

3 голосов
/ 07 декабря 2011

Это просто вопрос версии библиотек.

Ваш jsbin показывает jQuery 1.3.2 и jQuery UI 1.7.2.

В этом jsfiddle (с jq 1.3.2 и jqui 1.7.2) он не работает.

В этом другом , последних версиях обеих библиотек, работает .

jQuery 1.3.2 - это больше, чем унаследовано, вы не должны больше его использовать, кроме случаев, когда у вас нет выбора, но тогда вы должны ожидать, что некоторые (чрезмерно) вещи не будут работать, я боюсь .


Анимация градиентов

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

Ядро эффектов пользовательского интерфейса jQuery расширяет функцию анимации для возможности живые цвета тоже. Это сильно используется переходом класса функция, и она может покрасить анимировать следующие свойства:

  • BackgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • цвет
  • outlineColor

с одной из следующих комбинаций:

  • hex (# FF0000)
  • rgb (rgb (255,255,255))
  • имена ("черные")

С другой стороны, CSS-переходы не обрабатывают градиенты ни в одном браузере. Хотя есть несколько обходных путей:


Слово на кнопках YouTube, которое вы упоминаете.

Для меня градиенты не анимированы, так как они используют переходы CSS. Вот как я это проверил:

  1. Перейти на страницу с видео на YouTube.
  2. «Осмотреть элемент» на кнопке (хром), чтобы открыть консоль. Выберите элемент <button>.
  3. Глядя на класс CSS .yt-uix-button , измените [-*-]transition: all 0.218s; на "1s"
  4. Например, измените один из цветов градиента на Зеленый.
  5. Наведите на кнопку, все свойства анимированы, но не градиент.

Мое мнение таково, что анимация границы (и т. Д.) Создает впечатление, что градиент анимирован, но это не так.

0 голосов
/ 07 декабря 2011

Я не понимаю, почему вы используете javascript:$(this).removeClass("hoverf",1000), для чего второй параметр removeClass? И я не нахожу никаких проблем, он просто отлично работает в Chrome.

...