Home / Questions / 45459
Accepted
hubman
Asked: 2020-01-23 20:56:00 +0800 CST 2020-01-23 20:56:00 +0800 CST

Fade only the background of an HTML element

  • 772

I want the text not to be lost, only the red background color should be lost. Here my code: 

$('#confirmacion').fadeIn(9500);
$('#confirmacion').fadeOut(9500);
#confirmacion{
    background-color: red;
    color: #000;
    height: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmacion"> iniciando un nuevo registro.</div>

javascript

2 Answers

  1. Best Answer

    Greeting!

    As we well know, the fadeIn and fadeout action is applied on the element and its "children", therefore making one of them visible beyond the 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 run, 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 call the jQuery Color library to allow us to dynamically change the div's backgroundColor and animate it in the process.

    More information .animate()

    I hope it helps you.

    • 4

  2. What you are trying to do is not going to work because you are vanishing <div>him and with him everything that he carries inside.

    Here I leave you an alternative that could help you (I set it to do the animation when you click so that the example is 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>

    • 2