Fade only the background of an HTML element

Greetings!

As we well know the action fadeIn and fadeout is applied to the element and its "children" (childs), therefore making one of them visible beyond of the very visibility of the parent element is somewhat difficult.

There is a solution, from the same jquery library there is the animate () method with this method, you can do what you need, specifying a time for it to be execute, therefore the solution that I would provide would be this:

$('#confirmacion').animate({backgroundColor:'white'}, 9500);
$('#confirmacion').animate({backgroundColor: 'red'}, 9500);

#confirmacion{
	background-color: red;
	color: #000;
	height: 2em;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<div id="confirmacion">
    Iniciando un nuevo registro.
</div>

What we do in this is to call the jQuery Color library to allow us to dynamically change the backgroundColor of the div and animate it in the process.

More information .animate ()

I hope it serves you.

What you are trying to do is not going to work because you are fading the <div> and with it everything you have inside.

Here I leave you an alternative that could help you (I put you to do the animation when you click to make the example more comfortable):

$('#confirmacion').on('click', function() {
    $(this).css("background-color", "rgba(255, 255, 255, 0)"); // Transparento el fondo
});

#confirmacion{
	background-color: red;
	color: #000;
	height: 2em;
        transition: all 9500ms /* Esto hace que tarde 9500 ms la animacion */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmacion"> iniciando un nuevo registro.</div>