JQuery стиль одушевленные CSS не работает

При нажатии на элемент, элемент будет расширяться.

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

Это мой код для запуска анимации:

$el.animate({ 
      "font-size": "26px", 
      paddingTop: 15, 
      paddingRight: 5, 
      paddingBottom: 15, 
      paddingLeft: 10   }).next().slideDown();

Если я пытаюсь это, изменить цвет на красный, он не работает:

$el.animate({ 
      "font-size": "26px", 
      "color": "red", 
      paddingTop: 15, 
      paddingRight: 5, 
      paddingBottom: 15, 
      paddingLeft: 10   }).next().slideDown();

Может кто-нибудь объяснить мне, почему код не беспокоит?

Спасибо!

источник

2017-02-18 BigRedDog

Насколько я знаю .animate() влияет на числовые атрибуты только, как ширина, высота, края, обивка и т.д., но не цвета или аналогично. Чтобы изменить цвет, вам нужно установить класс, то есть '.red {color: red;}', добавить «переход: цвет .5s' в селектор' el' и использовать jquery-методы, такие как '.addClass, removeClass, toggleClass' – Banzay

Этот пост также кажется уместным: http://stackoverflow.com/questions/13461984/jquery-animate-not-working-with-colors –

Библиотека jQuery Core не поддерживает цветовые анимации по умолчанию.

Вам нужно будет использовать jQuery UI для свойств как color или background-color работать в функции JQuery как animate().

Одно из решений:

Если вы можете, просто включить библиотеку JQuery UI после JQuery. Много версий одного и того же можно найти here

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> 
<script type='text/javascript' src='http://code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script>

I have updated your Codepen

источник

2017-02-18 16:27:29

Если я правильно понимаю, эффект, который вы пытаетесь достичь, вы можете достичь его, добавив:

$('dt').css({"color" : "black"}); 
$el.css({"color" : "red"});

под вашим $el.animate({ [...] }).next().slideDown(); заявление.

Чтобы включить цветовой переход к анимации, то вы можете добавить:

dt {transition: color 0.4s linear;}

ваших стилей CSS.

источник

2017-02-18 16:27:05 Rounin

JQuery стиль одушевленные CSS не работает

ответ

Смежные вопросы