How To Make Tag Appear At X Time And Disappear At X Time

Question

I am trying to make text appear after 1 min of the user being on the site and going away after 2sec.

I know how to make it fade out:

setTimeout(fade_out, 2000);

function fade_out() {
  $("#msg").fadeOut().empty();
}

But I need help on making it fade in.

I don't understand JS that well so please try to include a example.

Answer 1

Jquery might be the easiest answer, but you can also do that with pure CSS Animations, without any javascript.

HTML :

<p id="element">P IS SHOWN</p>

CSS :

#element {
  padding: 50px;
  background: red;
  color: white;
}

#element {
    -moz-animation: cssAnimation 64s ease-in;
    /* Firefox */
    -webkit-animation: cssAnimation 64s ease-in;
    /* Safari and Chrome */
    -o-animation: cssAnimation 64s ease-in;
    /* Opera */
    animation: cssAnimation 64s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
  0%   {opacity: 0;display:none;}
  /* 59 sec : start fading in*/
  92%   {opacity: 0;display:block;}
  /* 60 sec : visible */
  94%   {opacity: 1;display:block;}
  /* 62 sec : start fading out */
  97%   {opacity: 1;display:block;}
  /* 63 sec : not visible */
  99%   {opacity: 0;display:block;}
  /* 64 sec */
  100%   {opacity: 0;display:none;}
}

Here's a Fiddle (6 seconds duration) : DEMO

Answer 2

In addition to your code use fadeIn() and delay() ::

_{Note:: On this demo I use short times that you can adjust later to your needs}

setTimeout(fade_in, 2000);

function fade_in() {
  $("#msg").fadeIn().delay(1000).fadeOut();
}

#msg {
  display:none;
  padding: 50px;
  background: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg">ALERT</div>

Answer 3

setTimeout(
function() 
{
  $("£msg").fadeIn(200);
  //call the fade out function here
}, 60000);

Source: How to wait 5 seconds with jQuery?

Answer 4

You are on the correct track. Just need to fadeIn before fading out

//fade in in 6 seconds (change to 60000 for 1 minute)
setTimeout(fade_in, 6000);

//function to fade it in
function fade_in() {
  $("p").fadeIn();

  //in this function we can start to fade out after 2 seconds
  setTimeout(fade_out, 2000);
}

//function to fade out
function fade_out() {
  $("p").fadeOut();
}

example: https://jsfiddle.net/j0p7dvLn/

Answer 5

To fade the text in after 60 seconds, and then fade it out 2 seconds later, you can do something like this:

var fadeOutText = function () {
    $("#msg").fadeOut(); // select the message and fade it out
};

var fadeInText = function () {
    $("#msg").fadeIn(); // select the message and fade it in

    setTimeout(fadeOutText, 2000); // set the text to fade out in another 2 seconds (2000 ms)
};

setTimeout(fadeInText, 60000); // start the fade in after 60 seconds (60000 ms)