При клике на кнопку фон блока должен менять цвет
 

HTML

<div class="animate2"></div>
<form name="form2" action="">
<label>Choose predefined color:
<select>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</label>

<label> or enter a custom (HEX) one:
<input type="text" placeholder="#123456" id="hex"/>
</label>
<button id="paint">Paint me</button>
</form>



CSS

.animate2 {
background:#0F0;
max-width:400px;
margin:0 auto!important;
height:400px;

Как это написать в jQuery?
$('#action').animate(function(e) {
e.preventDefault();

//Animations

//$('some_element').animate(properties, [duration], [easing], [callback]);

$('.animate2').animate({
height: 400,
color: $('#hex').val()}, 'linear');

});

что я написала:

$('#paint').click(function(){
$('.animate2').css('background',$('#hex').val());
});
$('#paint').click(function(){
$('.animate2').css('background',$('select option:selected').val());
});

работает, НО
нужно сделать так, чтобы при клике на кнопку фон блока должен меняться на цвет, выбранный в выпадающем меню, если не задан
пользовательский цвет, в противном случае цвет фона для блока должен соответствовать введённому в поле значению.

Метод animate JQ не может анимировать такое свойство как цвет от ... до, для этого есть плагин.

Taylor,
По идее есть css

a{
 transition:  color 5s;
 background-color:red;
}

1. Прописываешь элементу с классом .a новый background-color, анимация делается css