Jquery hover (mouseover) works but hover (mouseRemove) function does not load

Jquery hover (mouseover) works but hover (mouseRemove) function does not load

Hi there this is my first legitimate question for stackoverflow, forgive
me if I mess up on some social policies. I'm working on Jquery, and I am
using these plugins.
<script src="js/jquery.min.js"></script>
<script type="text/javascript"
src="js/jquery.color-2.1.0.min.js"></script>
To make this section of code work:
$(document).ready(function () {
var timeout;
$('.twitter').hover(
function () {
timeout = setTimeout(
function () {
$('body').animate({
"background-color": "#dd4b39"
}, 400);
},
function () {
$('body').animate({
"background-color": "#000000"
}, 400);
clearTimeout(timeout);
});
});
});
Here's a JSFiddle
The code will activate the hover effect and change the div to a soft red,
but it won't change the div to a solid black when you move your mouse off
the div. Most examples of this online suggest an extremely similar
approach, so I'm curious as to where I fouled this up.