Changing the colour of a div using click, toggle and fade in

Changing the colour of a div using click, toggle and fade in

Hi folks,
I can't quite get this work, I've got the colour change working fine but get the fade in (with about 3000) to work.
This what I've have so far. Thanks for help, cheers

function toggleClass(el) {
if(el.className == "class1"){
el.className = "class2";
} else {
el.className = "class1";
}
}
----------------------------------------------------------------------------------
<div class="class1" onclick="toggleClass (this)">
jQuery Click to Toggle</div>
------------------------------------------------------------------------------------
.class1 {
height: 164px;
width: 300px;
background-color: #F33;
}
.class2 {
height: 164px;
width: 300px;
background-color: #6CF;
}