jQuery, onclick change css свойства с переходом

Question

В jQuery У меня есть раздел, где onclick он изменяет некоторые свойства. Мне было интересно, могу ли я включить css-переходы в это как-то. Я попытался добавить его так же, как и я, но это просто дало ему свойство, которое не повлияло на него, когда оно изменилось.

$("#slide1-1").click(function() { 
$('.aboutchange').css('color', '#433792'); 
}); 

$("#slide1-2").click(function() { 
$('.aboutchange').css('color', 'orange'); 
}); 

$("#slide1-3").click(function() { 
$('.aboutchange').css('color', 'green'); 
}); 

$("#slide1-4").click(function() { 
$('.aboutchange').css('color', 'red'); 
}); 

Answer 1

Вам необходимо использовать функцию анимации jQuery для переходов. это будет анимировать ваш цвет текста по выбору в течение 1000 миллисекунд. Пользовательский интерфейс jQuery дает множество бонусных эффектов.

$("#slide1-1").click(function() { 
    $('.aboutchange').animate({ color:'#433792' }, 1000); 
}); 

редактировать

может быть, я не понял вопроса, и именно поэтому я получил downvoted ... если вы пытаетесь использовать CSS3 переходы, то вы должны быть декларирование переходов и состояний в CSS и использование .addClass() и .removeClass() для добавления/удаления соответствующих состояний и переходов

Answer 2

jQuery по умолчанию не предоставляет цветные анимации. Вам нужно использовать jQuery UI, который поставляется с плагином jquery-color, или вы можете просто использовать jquery-color. Затем вы можете анимировать, как и любое другое свойство:

$element.animate({ color: 'blue' });