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