mouseover and mouseout animation

mouseover and mouseout animation

I want it so that an element changes the background color (with animation) when I hover over it, then change back on mouseout.

here's what I have
onmouseover='$(this).animate({ backgroundColor: "#E1E1E1" }, 1000);'
onmouseout='$(this).animate({ backgroundColor: "#F5F5F5" }, 1000);'


but it animates allot of times..

have you ever had this problem?

I want the same effect as http://demo.yootheme.com/index.php?show=nov08/index.php
when you hover over team log, or yootools, or yoosearch