fade-in jquery pop

by abuhamzah

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<p>
  <button id="in">fadeIn()</button>
  <button id="out">fadeOut()</button>
  <button id="toggle">fadeToggle()</button>
  <button id="to">fadeTo()</button>
</p>



<div id="test" class="alert alert-success" style="display:none;">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <i class="fa fa-check sign"></i><strong>Success!</strong> Changes has been saved successfully!
</div>

JavaScript

var test = $('#test'),
  $in = $('#in'),
  out = $('#out'),
  toggle = $('#toggle'),
  to = $('#to');


$in.click(function() {
  test.fadeIn(1000, function() {
    test.fadeOut(10000, function() {

    });
  });
});


out.click(function() {
  test.fadeOut(1000, function() {

  });
});


toggle.click(function() {
  test.fadeToggle(1000, function() {

  });
});

to.click(function() {
  test.fadeTo(1000, 0.5, function() {

  });
});