How to do so that with fadeOut the div does not disappear?

Question

How to do so that with fadeOut the div does not disappear?

Navigation

#1 by (2 votes)

1

Good morning, my problem is that when the word hello disappears, the world comes to occupy the place of hello.
Is the div deleted when using fadeOut? How to make this not happen?

<!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>

javascript jquery html5 web

asked by Ale 15.12.2017 в 21:50

source

1 answer

problem when saving records with fetch - error Undefined index Start / pause button

score 2 · Accepted Answer

Obviously, using .fadeOut () will apply the display:none property to your element, visually deleting it from the DOM , what you can do is animate the property opacity of the item causing it to visually disappear but actually continue in place:

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