1

Buenas,mi problema es que cuando la palabra hola desaparece mundo pasa a ocupar el lugar de hola.
¿Se borra el div al usar fadeOut? ¿Como hacer para que esto no suceda?

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
   
    <title>Hola Mundo</title>
    <style>
    
    #caja{
        text-align: center;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 40px;
    }
    #caja2{
        text-align: center;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 40px;
    }
    
    
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

    setTimeout(function(){
        $("#caja").hide()
        .text("¡Hola")
        .fadeIn(2000)
        .fadeOut(2000);
    },2000);
       

    setTimeout(function(){
     $("#caja2").hide()
        .fadeIn(2000)
        .text("Mundo!")
        .fadeOut(2000);
    },4000);     
    })
    </script>
    
</head>
<body>
    <div id="caja">
    </div>
    <div id="caja2">
    </div>
</body>
</html>

1 respuesta 1

2

Evidentemente, al usar .fadeOut() se aplica la propiedad display:none a tu elemento, borrándolo visualmente del DOM, lo que puedes hacer es animar la propiedad opacity del elemento haciendo que visualmente desaparezca pero que realmente continúe en su lugar:

$(document).ready(function(){

setTimeout(function(){
    $("#caja").hide()
    .text("¡Hola")
    .fadeIn(2000)
    .animate({
      'opacity': 0
    }, 2000);
},2000);


setTimeout(function(){
   $("#caja2").hide()
      .fadeIn(2000)
      .text("Mundo!")
      .animate({
        'opacity': 0
      }, 2000);
  },4000);     
})
#caja{
    text-align: center;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 40px;
}
#caja2{
    text-align: center;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="caja">
</div>
<div id="caja2">
</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.