CSS Solution to Hide Div After X Amount of Seconds

css solution to hide div after x amount of seconds

This is possible with CSS animation and the forwards property to pause the animation at 100%. The display property cannot be animated.

The element is given position: relative and then opacity: 0 and left: -9999px when it reaches 100%. It will fade and then pull itself outside the viewport.

See browser support here - Compatible IE 10+ !

Here is a complete list of animated properties.

Here are three ways to pull the div outside of the viewport at 100%:

1. left: -9999px combined with position: relative on the element (Like in the example below)

2. height: 0 or max-height: 0 combined with text-indent: -9999px

3. This example with border-width from @Troy Gizzi

Example

This example fades the text after 5 seconds and then removes the div from the viewport.

div {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
  background: red;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}

<div>hide me after 5 seconds</div>

CSS Auto hide elements after 5 seconds

YES!

But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.

Therefore, create an animation for the elements in question, and simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.

FIDDLE

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>

CSS hide element, after 5 seconds show it

try this simple solution.

#showMe {  animation: cssAnimation 0s 5s forwards;  visibility: hidden;}
@keyframes cssAnimation {  to   { visibility: visible; }}

<div id='showMe'>Wait for it...</div>

Right to Left div and hide after 5 sec using CSS

Consider a second animation. You can also simplify your code by removing a lot of non needed properties

.successAlet {  background-color: red;  color: #fff;  position: fixed;  top: 0;  width: 400px;  right: 0;  z-index: 1001;  animation-name: fadeInRight,hide;  animation-duration: 1s;  animation-delay: 0s,3s;  animation-fill-mode: both;}

@keyframes fadeInRight {  0% {    opacity: 0;    transform: translate3d(100%, 0, 0);  }}
@keyframes hide {  100% {    opacity: 0;  }}

<div class="successAlet">  <h2>Animate and then autohide in 5 sec</h2></div>

How can I hide a div after x seconds in blazor?

The following code snippet demonstrate how to display the modal div and how to hide it. Note that the usage of the Timer object is not necessary, and may be considered over skilled.

Copy and test:

@page "/"

@if (alertMessageShow)
{

    <div class="alert alert-success" style="margin-left: 50px">@message</div>
}

<button type="button" @onclick="Save">Save Update</button>
@code {
    private bool alertMessageShow = false;
    private string message;

    private async Task Save()
    {
        message = "Saving update...";
        alertMessageShow = true;

        // Simulate saving operation, say, to a database. In a real world application the duration of
        // the delay is determined by the operation itslef; in other words, you do not use the line below
        await Task.Delay(5000);     

        message = "Updates saved...";
        await InvokeAsync(() => StateHasChanged());  
      
        // Wait 3 seconds for the user to read the message, and then close the modal
        await Task.Delay(3000);
       

        alertMessageShow = false;

    }
}

Note: I'd advise you to use toast notification modal dialog for such operations. See how chrissainty do that...

How to show a div for 10 seconds and hide it after?

I would do it with an onload on the body - which self-triggers a setTimeout and starts when the page is loaded.

function hideLoadingDiv() {  setTimeout(function(){    document.getElementById('LOADING').classList.add('hidden');  },10000)}

.hidden {  display: none;}

<html><head></head><body onload="hideLoadingDiv()"><div class="LOADING" id="LOADING" name="LOADING">Loading</div><div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">Menu</div></body></html>

Need to hide the clicked div and reappear after 10 seconds

Pls find the working snippet added below

$('body').on('click','.t11',function(){    $(this).hide();    var that = $(this);    setTimeout(function() {        that.show();    }, 1000);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="t1 t11">1</div><div class="t2 t11">2</div><div class="t3 t11">3</div><div class="t4 t11">4</div><div class="t5 t11">5</div>

Revealing items on hover, hide them after X seconds

You should use mouseenter and mouseleave events and add separate functionalities in each.
The reference to this might be lost in the callback function passed to setTimeout.

$(".home-box").mouseenter(function() {
    clearTimeout(timeout);
    $(this).css("opacity", 1);
});

$(".home-box").mouseleave(function() {
    var $element = $(this)
    timeout = setTimeout(function(){
        $element.css("opacity", 0);
    },500);
});

Hide div for some time

1. You can hide initially using the css display:none
2. setTimeout() for setting a delay
3. show() for showing hidden element

Snippet :

setTimeout(function() {  $('#hide').show()}, 4000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="hide" style="display:none">hidden</div>

---

Related Topics