article

Thursday, June 28, 2012

Jquery Message Effect Delay Trick

Jquery Message Effect Delay Trick
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#show-alert').click(function() {
 $('<div class="quick-alert">Message Effect Delay Trick</div>')
 .insertAfter( $(this) )
 .fadeIn('slow')
 .animate({opacity: 1.0}, 3000)
 .fadeOut('slow', function() {
   $(this).remove();
 });
  });
});
</script>
<style>
.quick-alert {
   width: 50%;
   margin: 1em 0;
   padding: .5em;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
 }
</style>
<input type="submit" value="Show Alert" id="show-alert">

Related Post