You can make it work like this -
Html
<div id='wrapper'>
<div id="blue"></div>
<div id="red"></div>
</div>
Js
$(function () {
$("#wrapper").mouseenter(function () {
$("#blue").stop(true, true).fadeOut("normal");
$("#red").stop(true, true).fadeIn();
});
$("#wrapper").mouseleave(function () {
$("#blue").stop(true, true).fadeIn("normal");
$("#red").stop(true, true).fadeOut();
});
});
Demo --->
http://jsfiddle.net/ywTBe/1/