Как добавить transition с помощью jQuery?

Question

[Unknown]

Привет!
Есть вот такое меню

При нажатии на li родительского элемента ul

<ul class="controls">
	<li class="filter active" data-filter="all">Все</li>
	<li class="filter" data-filter=".webdesign">Веб-дизайн</li>
	<li class="filter" data-filter=".development">Веб-разработка</li>
</ul>

происходит добавление класса active с помощью jQuery:

$('.controls li').click(function(){
	$('.controls li').removeClass('active');
	$(this).addClass('active');
});

Уже 30 мин. ищу правильный метод для jQuery чтобы сделать плавный переход при смене класса active.

Делал так, но я могу быть не прав, поправьте меня пжлст.

$('.controls li').click(function(){
        $('.controls li').ЗДЕСЬ ЧТО-ТО ДОЛЖНО БЫТЬ('slow');
	$('.controls li').removeClass('active');
	$(this).addClass('active');
});

Answer 1

[Kovalsky]

Если вы оперируете классами, то за анимацию отвечает CSS:

.controls li {
    background-color: transparent;
    transition: all 1s ease 0s;
}
.controls li.active {
    background-color: #98312A;
}