Display message and hide in a few seconds

Asked

Viewed 13,696 times

3

How to show a notification when entering the site and disappear after a few seconds with jQuery?

I tried something but I couldn’t.

JSFIDDLE: http://jsfiddle.net/sunnypmody/XDaEk/

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>
jquery css css-transitions

  • Welcome to sopt. What you have tried, don’t try any in the presented code.

  • The problem is I can’t fit that Codex: http://jsfiddle.net/sunnypmody/XDaEk/

  • Can you add this jsfiddle link to the question? Click [Edit]

  • JS Fiddle Added

4 answers

4


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>
<div id="foo">Foo Bar</div>

3

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>

2

It is not necessary Javascript for this, you can only use the animations of the CSS since you want to display the notification as soon as the user enters the site, not when the page is fully loaded or the GIFT be ready.

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

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

And then use that rule to cheer up 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 happen instantly, when the user enters the page. By means of Animation-Duration, the duration of what is specified in keyframe.

To maintain the final style (opacity: 0) in the animation target element, there is the property animation-fill-mode that can receive the value forwards. And you’ll have it:

@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>

0

If it is in Bootstrap you can use the window.setTimeout. It’s a lot 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>
  • 2

    No need to use bootstrap to use window.setTimeout

  • I know! I just made a suggestion, and in that suggestion I used Bootstrap as an example, maybe someone who is using this library might need it, but I think you don’t quite understand hehhehe Hug!

Browser other questions tagged jquery css css-transitions

You are not signed in. Login or sign up in order to post.