why is this happening to my jquery ui animation?

why is this happening to my jquery ui animation?

This is my HTML code
<div id="menu_status_item">
<span class="menu_status_bar"></span>
</div>
This is my CSS:
#menu_status_item
{
margin-top: 40px;
width: 100%;
}
.menu_status_bar
{
margin-left: 45px;
color: #fff;
}
And this is my jquery
var statusMessage = 'Success'
var colorCode = '';
var statusText = '';
if(statusMessage.indexOf("Success") > -1) {
colorCode = '#33CC33';
statusText = 'Success';
}else{
colorCode = '#CC0000';
statusText = 'Failure';
}
$(".menu_status_bar").css("display", "inline-table");
$(".menu_status_bar").text(statusText);
$("#menu_status_item").animate({backgroundColor: colorCode}, 4000);
$("#menu_status_item").animate({backgroundColor: "#ffffff"});
$(".menu_status_bar").css("display", "none");
Basically i want the text "Success" inside the menu_status_bar to appear,
do the animation, and disappear with the display: none.
If i use the display:none at the end, the text won't even show up. If i
remove it, the animation works, but the text will remain there... if
someone selects it, its horrible because the text will be highlighted.
Does any one know what could this be? or how can i achieve the same result
but doing it differently?
Thanks.