Display message and hide in a few seconds [closed]

Show a notification when entering the site and disappear after a few seconds

Using the example you gave yourself:

$(document).ready(function(){  // A DIFERENÇA ESTA AQUI, EXECUTA QUANDO O DOCUMENTO ESTA "PRONTO"
  $( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#success-btn" ).click(function() {
  $( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#failure-btn" ).click(function() {
  $( "div.failure" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#warning-btn" ).click(function() {
  $( "div.warning" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    display: none;
}

.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <button id="success-btn">Success</button>
    <button id="failure-btn">Failure</button>
    <button id="warning-btn">Warning</button>
</p>
<div class="alert-box success">Successful Alert !!!</div>
<div class="alert-box failure">Failure Alert !!!</div>
<div class="alert-box warning">Warning Alert !!!</div>

Does not require Javascript for this, you can only use the CSS animations since you want to display the notification as soon as the user enters the site, not when the page is fully loaded or the DOM is ready.

Create your own behavior rule with @ keyframes , for example:

@keyframes hide {
  from { opacity: 1 }
  to   { opacity: 0 }
}

And then use this rule to animate the element containing the notification.

With the property animation-delay you can set the time for the animation to start, if you do not want it to occur instantly, when the user enters the page. By means of animation-duration , you define the duration that should happen what was specified in the keyframe.

To maintain the final Style (opacity: 0) in the target element of the animation, there is the property animation-fill-mode which can receive the value forwards. And you will have this:

@keyframes hide {
  from { opacity: 1 }
  to   { opacity: 0 }
}

div {
  animation: hide 2s 2s forwards
}

<div>Notificação de 2 segundos...</div>

Applying this to the fiddle that was posted in the comments, it would look like this:

@keyframes hide {
  from { opacity: 1 }
  to   { opacity: 0 }
}

.alert-box {
  animation: hide 2s 2s forwards;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6
}

<div class="alert-box success">Successful Alert !!!</div>

If it is in Bootstrap you can use the window.setTimeout. it's much easier. Hug!

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> You have been signed in successfully!
</div>

<script >window.setTimeout(function () {
    $(".alert").fadeTo(500, 0).slideUp(500, function () {
        $(this).remove();
    });
}, 4000);
//# sourceURL=pen.js
</script>