¿Cómo ocultar el elemento div después de unos segundos en jQuery?

¿Dado un elemento div y la tarea es ocultar el elemento div después de unos segundos usando jQuery?

Acercarse:

  • Seleccione el elemento div.
  • Use la función de retraso (setTimeOut(), delay()) para proporcionar el retraso para ocultar() el elemento div.

Ejemplo 1: En este ejemplo, el método setTimeOut() se usa para proporcionar demora al método fadeOut().

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to hide div element after
            few seconds in jQuery ?
        </title>
          
        <style>
            #div {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
          
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
  
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 19px; font-weight: bold;">
        </p>
          
        <div id = "div">
            This is Div box.
        </div>
          
        <br>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to hide div after 1 sec.");
              
            function GFG_Fun() {
                setTimeout(function() {
                    $('#div').fadeOut('fast');
                }, 1000);
                $('#GFG_DOWN').text("Div hides after 1 second."); 
            }
        </script> 
    </body> 
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: En este ejemplo, el método delay() se usa para proporcionar retraso al método fadeOut().

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to hide div element after
            few seconds in jQuery ?
        </title>
          
        <style>
            #div {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
          
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
  
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 19px; font-weight: bold;">
        </p>
          
        <div id = "div">
            This is Div box.
        </div>
          
        <br>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to hide div after 1 sec.");
              
            function GFG_Fun() {
                $("#div").delay(1000).fadeOut(500);
                $('#GFG_DOWN').text("Div hides after 1 second.");     
            }
        </script> 
    </body> 
</html>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *