This is how it should be:
Code:
$(function(){
$("button").mouseover(function(){
var $p = $("#P44");
$p.stop()
.css("background-color","yellow")
.hide(1500, function() {
$p.css("background-color","red")
.show(1500);
});
});
});
Demo: http://jsfiddle.net/p7w9W/2/
Explanation:
You have to wait for the callback on the animating functions before you switch background color. You should also not use only numeric ID:s, and if you have an ID of your <p> there you shouldn't include a class in your selector.
I also enhanced your code (caching of the jQuery object, chaining, etc.)
Update: As suggested by VKolev the color is now changing when the item is hidden.