5

Quiero que no se pierda el texto, solamente debería perderse el color rojo de fondo. Aquí mi código:

$('#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>

2 respuestas 2

4

Saludo!

Como bien sabemos la accion fadeIn y fadeout se aplica sobre el elemento y sus "hijos" (childs), por tanto hacer que uno de ellos sea visible mas alla de la visibilidad misma del elemtno padre es algo dificil.

Hay una solucion, de la misma libreria de jquery existe el metodo animate() con este metodo, puede hacer lo que necesitas, especificando un tiempo para que este se ejecute, por lo tanto la solucion que yo te proporcionaria seria esta:

$('#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>

Lo que hacemos en este es llamar a la libreria de jQuery Color para que nos permita cambiar dinamicamente el backgroundColor del div y lo animamos en el proceso.

Mas informacion .animate()

Espero te sirva.

2

Lo que tratás de hacer no va a servir porque estás desvaneciendo el <div> y con él todo lo que lleva adentro.

Acá te dejo una alternativa que podría servirte (puse para que haga la animación cuando hacés click para que sea más cómodo el ejemplo):

$('#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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.