View message and hide in a few seconds

Navigation
1

How do I show a notification when entering the site and disappear after a few seconds with JQuery?

I tried something but I could not.

JSFIDDLE: link

Code: 

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title>haxP v2</title>
      <link rel="shortcut icon" href="./favicon.png">
      <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
   <body bgcolor="#3CB371"/>
      <center>
         <style>body {left:0;line-height:200px;margin:auto;margin-top:-100px;position:absolute;top:50%;width:100%;color:#ffffff;font-family:Constantia,"Lucida Bright","DejaVu Serif",Georgia,serif;font-size:56px;}#frase{left:0;line-height:200px;margin:auto;margin-top:-100px;position:absolute;top:65%;width:87%;;font-family:Constantia,"Lucida Bright","DejaVu Serif",Georgia,serif;font-size:8px;}#rodape{left:0;line-height:200px;margin:fixed;margin-top:0px;position:absolute;bottom:0;top:110%;width:100%;;font-family:Constantia,"Lucida Bright","DejaVu Serif",Georgia,serif;font-size:10px;}</style>
         </head>
         <body>
            <div id="texto">
               <font face="Pacifico">Welcome Underground</font>
            </div>
            <div id="frase">
               Cada sonho que você deixa pra trás, é um pedaço do seu futuro que deixa de existir.
            </div>
            <div id="rodape">
               Powered by <b><font face="Pacifico" size="2">Cruz</font></b>
            </div>
   </body>
</html>
</center>
    
asked by anonymous 29.01.2016 / 00:15

3 answers

2

Teaching example: 

// Iniciará quando todo o corpo do documento HTML estiver pronto.
$().ready(function() {
	setTimeout(function () {
		$('#foo').hide(); // "foo" é o id do elemento que seja manipular.
	}, 2500); // O valor é representado em milisegundos.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="foo">Foo Bar</div>
    
29.01.2016 / 01:55
3
  

Show notification when entering website 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><buttonid="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>
    
29.01.2016 / 11:19
0

You do not need Javascript for this, you can only use the animations of CSS since you want to display the notification when 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 animation-delay property 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. Through 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 animation element, there is animation-fill-mode " that can receive the value forwards . And you'll get 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 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>
    
08.04.2016 / 11:30
How to construct a json answer using Gson Count elements within a parent div separately